README.zh_CN.md

Vue Styled Components

一个类似于 styled-components 的 CSS in JS 库，支持 Vue 3，并帮助您快速开发应用程序！

Changelog · English · 中文

Important

这个库已经迁移到新的npm组织 @vue-styled-components/core 旧的npm组织 已经废弃，不再发布新版本

✨特性

✅ 样式化 Vue 组件或原生组件

✅ 设置默认 Attributes

✅ 传递 Props

✅ 支持主题化

✅ 生成 keyframes

✅ 生成可复用 CSS 片段

✅ 创建全局样式

✅ 添加或覆盖 Attributes

✅ 支持嵌套 CSS 写法

✅ 自动添加浏览器私有前缀

...

文档

详细的介绍和使用方法，请参考官方文档

快速开始

📦安装

npm i @vue-styled-components/core

yarn add @vue-styled-components/core

pnpm i @vue-styled-components/core

💅基本使用

<script setup lang="ts">
import { styled } from '@vue-styled-components/core';
import OtherComponent from './VueComponent.vue';

const StyledDiv = styled('div')`
  width: 100px;
  height: 100px;
  background-color: #ccc;
  color: #000;
`;
const StyledStyledDiv = styled(StyledDiv)`
  width: 100px;
  height: 100px;
  background-color: #000;
  color: #fff;
`;
const StyledOtherComponent = styled(OtherComponent)`
  width: 100px;
  height: 100px;
  background-color: red;
  color: #fff;
`;
</script>

<template>
  <StyledDiv>Styled Div</StyledDiv>
  <StyledStyledDiv>Styled Styled Div</StyledStyledDiv>
  <StyledOtherComponent>Styled Other Vue Component</StyledOtherComponent>
</template>

🔧Attributes 设置

<script setup lang="ts">
import { styled } from '@vue-styled-components/core';

const StyledDiv = styled.div.attrs({
  class: 'styled-div'
})`
  width: 100px;
  height: 100px;
  background-color: #ccc;
  color: #000;
`;
</script>

<template>
  <StyledDiv>Styled Div</StyledDiv>
  <!-- <div class="styled-div">Styled Div</div> -->
</template>

🕹️通过 Props 动态控制样式

如果要在样式中传递 props，则必须在 styled 函数中定义这些属性。因为 Vue 组件需要显式声明 props，以便 Vue 知道应如何处理传递给组件的外部 props（请参阅 Props Declaration）

<script setup lang="ts">
import { styled } from '@vue-styled-components/core';

const StyledDiv = styled('div', {
  color: String
})`
  width: 100px;
  height: 100px;
  background-color: #ccc;
  color: ${(props) => props.color};
`;
</script>

<template>
  <StyledDiv color="red">Styled Div</StyledDiv>
</template>

🧙主题

<script setup lang="ts">
import { styled, ThemeProvider } from '@vue-styled-components/core';

const StyledDiv = styled.div`
  width: 100px;
  height: 100px;
  background-color: #ccc;
  color: ${(props) => props.theme.color};
`;
</script>

<template>
  <ThemeProvider :theme="{ color: '#fff' }">
    <StyledDiv>Styled Div</StyledDiv>
  </ThemeProvider>
</template>

更多细节请查看 官方文档

🧑‍🤝‍🧑贡献者

另外，感谢 styled-components.