Vue Styled Components 新版本发布

仓库地址：https://github.com/vue-styled-components/core

文档地址：https://vue-styled-components.com

近段时间版本升级比较频繁，所以多个版本一起合并说明了

Feature

自动添加前缀(Auto Prefixing)

vue-styled-components 会在编译 CSS 时自动添加浏览器私有前缀，这可以确保你的 CSS 规则在最常见的浏览器中兼容。

import { styled } from '@vue-styled-components/core';
const StyledDiv = styled.div`
  display: flex;
}`

// output:
// .styled-div {
//   display: -webkit-box;
//   display: -webkit-flex;
//   display: -ms-flexbox;
//   display: flex;
// }

支持使用 Tailwind CSS

vue-styled-components/core 与 Tailwind CSS 无缝衔接，编写CSS更为方便。

新的 props 传递方式

在之前的版本，传递自定义 props，必须给 styled 传递 Props Definition 对象:

新版本为组件新增了一个默认 props 属性，开发者可以通过这个属性传递自定义 props，会自动注入 Context 中

TS 类型推断增强

• 支持自定义 Theme 对象的类型定义

新建一个 typedef 文件，declare module 和 重新定义 DefaultTheme 即可，DefaultThem 默认类型是 Record。

// xxx.d.ts
import '@vue-styled-components/core';

export {};

interface Theme {
  primary: string;
}

declare module '@vue-styled-components/core' {
  export interface DefaultTheme extends Theme {}
}

定义了 Theme 类型后，在使用 styled 编写 CSS 使用 theme 时，就可以获得 ts 的类型提示

更多用法参考文档：https://vue-styled-components.com/