Vue3中使用styled-components的实现

闯西北 · 发表于 2024-5-27 15:46:02

前言

随着组件化时代的兴起，前端应用开始采用组件级别的 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>

复制代码

更多细节查看文档：https://vue-styled-components.com
到此这篇关于Vue3中使用styled-components的实现的文章就介绍到这了,更多相关Vue3 styled-components内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/320952q19.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】我们会及时删除侵权内容，谢谢合作！