在常规应用程序中,CSS规则在整个样式表中都是重复的,这仅意味着浪费了字节。 相反,SX每次都会生成原子样式表,因此每个规则仅定义一次。 每个规则都有自己CSS类,组件可以选择多个类来获得与传统样式表相同的效果。 新的JS代码不必表示新CSS(CSS的大小呈对数增长)。
安装及使用
首先,从NPM安装软件包:
yarn add @adeira/sx
强烈建议(但可选)也使用相关的 :
yarn add --dev eslint-plugin-sx
创建一个样式表,并使用它来为React生成className道具:
import sx from '@adeira/sx' ;
export default function Example ( ) {
// className={styles('example')}
// ↓ ↓ ↓
// class="_1DKsqE v