Changelog · English · 中文

✨特性

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

✅ 设置默认 Attributes

✅ 传递 Props

✅ 支持主题化

✅ 生成 keyframes

✅ 生成可复用 CSS 片段

✅ 创建全局样式

✅ 添加或覆盖 Attributes

✅ 支持 CSS 嵌套。（仅支持 web: https://drafts.csswg.org/css-nesting/#nesting）

📦安装

npm i @vvibe/vue-styled-components

yarn add @vvibe/vue-styled-components

pnpm i @vvibe/vue-styled-components

🔨使用

样式化组件

<script setup lang="ts">
import { styled } from '@vvibe/vue-styled-components';
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 '@vvibe/vue-styled-components';

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 '@vvibe/vue-styled-components';

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 '@vvibe/vue-styled-components';

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>

生成 keyframes

您可以使用 keyframes 函数来定义关键帧动画，然后使用 keyframes 的返回值将其应用于样式化组件。

<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>
import { createGlobalStyle } from '@vvibe/vue-styled-components';

const GlobalStyle = createGlobalStyle`
    body {
      color: ${(props) => props.color};
    }
  `;
</script>
<template>
  <GlobalStyle color="white" />
</template>

生成css

一个用于从带有插值的模板字符串生成 CSS 的函数。

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

const mixin = css`
  color: red;
  background-color: blue;
`;
const DivWithStyles = styled('div')`
  ${mixin}
`;
</script>

<template>
  <DivWithStyles>Div with mixin</DivWithStyles>
</template>

添加或覆盖 Attributes

一个向 ComponentInstance or HTMLElements 添加或覆盖 Attributes 的函数.

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

const DivWithAttrs = withAttrs('div', {
  class: 'div-with-attrs'
});

const DivWithAttrs2 = withAttrs(DivWithAttrs, {
  class: 'div-with-attrs-2'
});
</script>

<template>
  <DivWithAttrs>Div with attrs</DivWithAttrs>
  <DivWithAttrs2>Div with attrs 2</DivWithAttrs2>
</template>

<style scope>
.div-with-attrs {
  color: red;
}

.div-with-attrs-2 {
  color: blue;
}
</style>

更多细节请查看 官方文档

贡献者

另外，感谢 styled-components.