在 Vue3 中使用 styled-components

前言

随着组件化时代的兴起，前端应用开始采用组件级别的 CSS 封装：通过 JavaScript 声明和抽象样式，以提高组件的可维护性。在组件加载时动态加载样式，并动态生成类名，从而避免全局污染。 styled-components 是其中的杰出代表。正如其名称所示，styled-components 以组件的形式声明样式，将样式与组件分离，实现逻辑组件与展示组件的分离。

styled-components 的官方 Vue 版本目前已多年没有更新，而且只支持到 Vue2。那么，在 Vue3 中怎么才能使用到 styled-components 呢？在 Github 翻了一下，大部分复刻 vue-styled-components 的库要么不再更新，要么没有任何文档和说明。

不过还是找到一个质量还可以的库：

vue-styled-components

查看了一下文档，还原了大部分核心 API，使用上与官方 styled-components 差别不大。下面来看看如何使用。

使用

安装

npm i @vvibe/vue-styled-components

styled原生组件

<script setup lang="ts">
import { styled } from '@vvibe/vue-styled-components'const StyledLink = styled('a')`color: darkred;
`
</script><template><StyledLink>链接</StyledLink>
</template>

也可以直接链式调用

<script setup lang="ts">
import { styled } from '@vvibe/vue-styled-components'const StyledLink = styled.a`color: darkred;
`
</script><template><StyledLink>链接</StyledLink>
</template>

响应式样式

<script setup lang="ts">
import { ref } from 'vue'
import { styled } from '@vvibe/vue-styled-components'const borderColor = ref('darkred')
const inputProps = { borderColor: String }
const StyledInput = styled('input', inputProps)`width: 100%;height: 40px;padding: 4px 8px;border: 1px solid ${(props) => props.borderColor};border-radius: 8px;
`const input = () => (borderColor.value = 'forestgreen')
const focus = () => (borderColor.value = 'skyblue ')
const blur = () => (borderColor.value = 'darkred')
</script><template><StyledInput placeholder="Type something" :borderColor="borderColor" @input="input" @focus="focus" @blur="blur" />
</template>

扩展样式

<script setup lang="ts">
import { styled } from '@vvibe/vue-styled-components';const BlueButton = styled.button`width: 120px;height: 40px;margin-right: 8px;padding: 4px 8px;border-radius: 9999px;box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);background-color: skyblue;font-weight: bold;
`;
const RedButton = styled(BlueButton)`background-color: darkred;color: white;
`;
</script><template><BlueButton>Blue Button</BlueButton><RedButton>Red Button</RedButton>
</template>

动画

<script setup lang="ts">
import { styled, keyframes } from '@vvibe/vue-styled-components'const rotate = keyframes`from {transform: rotate(0deg);}to {transform: rotate(360deg);}
`
const translate = keyframes`0 {transform: translateX(0);}50% {transform: translateX(250%);}60% {transform: rotate(360deg);}
`const StyledBaseDiv = styled.div`display: inline-block;width: 100px;height: 100px;
`const StyledRotateDiv = styled(StyledBaseDiv)`background-color: skyblue;animation: ${rotate} 2s linear infinite;
`const StyledTranslateDiv = styled(StyledBaseDiv)`margin-left: 10px;background-color: darkred;animation: ${translate} 2s ease infinite alternate;
`
</script><template><StyledRotateDiv /><StyledTranslateDiv />
</template>

主题

<script setup lang="ts">
import { styled, ThemeProvider } from '@vvibe/vue-styled-components'const Wrapper = styled.div`display: flex;justify-content: space-around;
`const StyledLink = styled.a`margin-right: 8px;color: ${(props) => props.theme.primary};font-weight: bold;
`
</script><template><Wrapper><a>This a normal link</a><ThemeProvider :theme="{ primary: 'red' }"><StyledLink>This a theming link</StyledLink></ThemeProvider></Wrapper>
</template>