Vue Styled Components 新版本发布

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

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

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

// output:
// .styled-div {
// display: -webkit-box;
// display: -webkit-flex;
// display: -ms-flexbox;
// display: flex;
// }
1
2
3
4
5
6
7
8
9
10
11
12
支持使用 Tailwind CSS
vue-styled-components/core 与 Tailwind CSS 无缝衔接，编写CSS更为方便。

1
2
3
4
5
6
7
8
9
10
11
新的 props 传递方式
在之前的版本，传递自定义 props，必须给 styled 传递 Props Definition 对象:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
新版本为组件新增了一个默认 props 属性，开发者可以通过这个属性传递自定义 props，会自动注入 Context 中

1
2
3
4
5
6
7
8
9
10
11
12
13
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 {}
}
1
2
3
4
5
6
7
8
9
10
11
12
定义了 Theme 类型后，在使用 styled 编写 CSS 使用 theme 时，就可以获得 ts 的类型提示