本文转载自微信公众号「Tecvan」，作家江江。转载本文请接洽Tecvan公众号。

2021年，vanilla-extract 行为黑马登顶了 css-in-js 景况度榜首(天然使用率仅为1%)，堪称是一个类型安全、高度兼容 TS 场景的库，国内关逢迎头还很少，略微看了一下还挺好用的。

官方文档：https://vanilla-extract.style/documentation/

绽放vanilla-extract官网文档，里面一经摆设了他的那些优点。行为一个如果使用 css-in-js 会首选styled-components的我来说，比较关怀的点主若是：

这两点说白了等于，零入手时且撑合手typescript。

零入手时：vanilla-extract会在编译时刻，编译出 css modules值和css实质，不需要带任何入手时实质到分娩环境，相对来说入手速率更高，居品体积更小;

typescript：撑合手typescript类型查验，CSS安全;

当今，业界大多数关连竞品如 styled-components等于一个入手时决策且基于标签模板进行书写，主要基于stylis泄漏器泄漏，如果常常更新props还会形成style标签多半插入到head里。

Webpack 环境下，需要同期装配 @vanilla-extract/css 与 @vanilla-extract/webpack-plugin 插件：

yarn 香港六合彩在线add @vanilla-extract/css @vanilla-extract/webpack-plugin 

装配完成后，修改 Webpack 成立：

const { VanillaExtractPlugin } = require('@vanilla-extract/webpack-plugin')  module.exports = {   entry: './src/index.js',   // ....   plugins: [new VanillaExtractPlugin()] }; 

这里可以看见，当咱们使用 vanilla-extract 时，需要装配两个库：

这里只会对vanilla-extract比较中枢的构建面貌关连几个API说起，其他API可以获胜赶赴官网检察。

style

皇冠体育hg86a

import { style } from '@vanilla-extract/css';  export const parentClass = style({   background: 'red',   ':hover': {     background: 'blue',   }, });  export const childClass = style({   selectors: {     '&:nth-child(2n)': {       background: '#fafafa',     },     [`${parentClass} &`]: {       color: 'pink',     },   }, }); import { childClass, parentClass } from './index.styles.css';  const Demo = () => (   <div className={parentClass}>     <div className={childClass}>DEMO1</div>     <div className={childClass}>DEMO2</div>     <div className={childClass}>DEMO3</div>   </div> );  export default Demo; 

这个爽脆的demo我服气，看几下就一经昭着是若何使用了。然而需技巧略的场所是，欧博会员网站为了培育可重视性，「每个面貌块只可针对某个元素(约略说是使用这个面貌块的元素)」。那么在上述代码里的selectors而言，「其谋划必须是」**&**(也等于自身元素)而弗成是其他元素。举例：`${parentClass} &`是OK的，然而`& div`是不允许的。这么的预计打算，我以为更是一种服务别离吧，每个面貌块齐针对某个元素，那么关于神色而言，面貌的可重视性就大大培育了，比拟于其他css in js(styled-components)就辞谢易出现面貌冗余的问题。关于一些独特情况，比如：在写styled-components咱们会运用其包裹arco组件(或是其他组件)，然后对其里面元素面貌进行覆写或是新增。

const StyledSelect = styled(Select)`     div {         color: red;     } ` 

那么在vanilla-extract面貌块里是弗成获胜作念到的，因为每个面貌块齐是针对某个元素，是弗成获胜通过该面貌块，获胜对其昆玉元素、子元素进行面貌调遣。然而，关于这种情况，是可以使用另一个APIglobalStyle进行设立。

globalStyle

顾名想义，等于全局面貌API。然而因为自己vanilla-extract走css module，每个className齐是唯一无二，那么通过globalStyle来对其子元素进行面貌调遣笼罩统统这个词是可行的。

import { style, globalStyle } from '@vanilla-extract/css';  export const parentClass = style({});  globalStyle(`${parentClass} > div`, {   color: 'red' });  const Demo = () => (     <div className={parentClass}>         <Select/>     </div> ) 

当今了解下来，vanilla-extract是一个总体还可以的css in js库，天然当今使用率比较低，然而后续厂商平台神色会探究在一些场所使用望望效用(毕竟不会增大js体积)。