花一个月时间为 vue3 重制了 vue-styled-components

花一个月时间为 vue3 重制了 vue-styled-components

前言

styled-components 在 React 是一个超级热门的 css in js 工具库。其实 styled-components 也有 Vue 版本（vue-styled-components），可惜的是只支持 Vue2，并且该项目已有几年没有更新，作者大概率不会发布 Vue3 版本了。

因此我决定重制一个支持 Vue3 版本的 vue-styled-components，该项目前前后后大概花费了一个月的业余时间，基本实现了 styled-components 的大部分核心功能，不过可能存在部分场景考虑不全面的问题，这个需要拜托广大朋友测试检验一下了，因为不是照搬 原styled-components 的 api，大部分是自己重新实现了的。

大家觉得可以的话点点star支持下😄

项目地址：https://github.com/v-vibe/vue-styled-components

✨特性

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

✅ 添加默认属性

✅ 传递属性

✅ 支持主题化

✅ 生成关键帧

✅ 生成 CSS 混合

✅ 创建全局样式

✅ 添加或覆盖Attrs

✅ 支持 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

🔨使用

样式化组件

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;
`;


    Styled Div
    Styled Styled Div
    Styled Other Vue Component

Attributes 设置

import { styled } from '@vvibe/vue-styled-components';
 
const StyledDiv = styled.div.attrs({
    class: 'styled-div'
})`
    width: 100px;
    height: 100px;
    background-color: #ccc;
    color: #000;
`;


    Styled Div
    

通过 Props 动态控制样式

import { styled } from '@vvibe/vue-styled-components';
const StyledDiv = styled('div', {
    color: '#fff'
})`
    width: 100px;
    height: 100px;
    background-color: #ccc;
    color: ${(props) => props.color};
`;


    Styled Div

主题

import { styled, ThemeProvider } from '@vvibe/vue-styled-components';
const StyledDiv = styled.div`
    width: 100px;
    height: 100px;
    background-color: #ccc;
    color: ${(props) => props.theme.color};
`;


    
        Styled Div
    

生成 keyframes

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

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;
`;


    
    

Create Global Style

一个用于创建全局样式的函数。

import { createGlobalStyle } from '@vvibe/vue-styled-components';
const GlobalStyle = createGlobalStyle`
    body {
        color: ${(props) => props.color};
    }
`;


    

Generate CSS Mixin

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

import { styled, css } from '@vvibe/vue-styled-components';
  
const mixin = css`
    color: red;
    background-color: blue;
`;
const DivWithStyles = styled('div')`
    ${mixin}
`;


    Div with mixin

添加或覆盖 Attributes

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

import { withAttrs } from '@vvibe/vue-styled-components';
const DivWithAttrs = withAttrs('div', {
    class: 'div-with-attrs'
});
const DivWithAttrs2 = withAttrs(DivWithAttrs, {
    class: 'div-with-attrs-2'
});


    Div with attrs
    Div with attrs 2


.div-with-attrs {
    color: red;
}
.div-with-attrs-2 {
    color: blue;
}

更多细节请查看 官方文档

本网站所收集的部分公开资料来源于AI生成和互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。