简介
StyleX 是一套简单易用的 JavaScript 语法和编译器，用于为 web 应用编写 样式。
StyleX 综合了内联样式和静态 CSS 的优势， 同时避免了它们的劣势。定义和使用样式都被限定在组件内， 在保留 Media Queries 等特性的同时，避免了样式的权重（specificity）问题。 StyleX 使用无冲突的原子 CSS 生成经过优化的样式， 这远胜于手动编写和维护的样式。
功能概览
可扩展
- 使用原子 CSS 将 CSS 输出最小化
- 随着代码库的增长，CSS 体积会趋于平稳
- 在不断扩大的代码库中，样式依然保持高度可维护性
可预测
- 不存在“远距离样式”影响
- 没有 specificity 问题
- “最后应用的样式总是生效！”
可组合
- 按条件应用样式
- 合并以及组合任意样式
- 将样式作为 props 进行传递
极速
- 无运行时样式注入
- 在编译时生成静态 CSS 文件
- 合并类名的运行时（runtime）轻量且极速
类型安全
- 类型安全的 API
- 类型安全的样式
- 类型安全的主题
使用 StyleX
配置编译器
请参阅 安装 指南。
定义样式
样式是使用对象语法和 create() API 定义的。
import * as stylex from '@stylexjs/stylex';
const styles = stylex.create({
root: {
width: '100%',
maxWidth: 800,
minHeight: 40,
},
});通过增加额外的 key 和对 create() 函数的多次调用，可以创建任意数量的样式规则：
import * as stylex from '@stylexjs/stylex';
const styles = stylex.create({
root: {
width: '100%',
maxWidth: 800,
minHeight: 40,
},
child: {
backgroundColor: 'black',
marginBlock: '1rem',
},
});
const colorStyles = stylex.create({
red: {
backgroundColor: 'red',
borderColor: 'darkred',
},
green: {
backgroundColor: 'lightgreen',
borderColor: 'darkgreen',
},
});
function ReactDiv({ color, isActive, style }) {
/* ... */
}使用样式
要使用样式，必须将其传递给 props() 函数。可以使用
标准的 JavaScript 表达式并根据判断条件组合和应用样式。
import * as stylex from '@stylexjs/stylex';
const styles = stylex.create({ ... });
const colorStyles = stylex.create({ ... });
function ReactDiv({ color, isActive, style }) {
return <div {...stylex.props(
styles.main,
// apply styles conditionally
isActive && styles.active,
// choose a style variant based on a prop
colorStyles[color],
// styles passed as props
style,
)} />;
}上面的示例使用了 JSX 语法。StyleX 本身与框架无关。同样的代码
可用于其他接受 className 字符串和 style 对象的框架，
如 SolidJS、 Preact 或 Qwik。
理想的使用场景
StyleX 适用于各种各样的项目。不过，初衷是为了 应对特定使用场景的挑战而设计的。
用 JavaScript 编写 UI
StyleX 是一个 CSS-in-JS 库，这意味着当应用程序 的 UI 使用 JavaScript 编写时，它能发挥最大的作用。如果应用程序使用的是 React、 Preact、 Solid、lit-html 或 Angular 等框架，那么使用 StyleX 就会非常合适。
有些框架（如 Svelte 和 Vue）使用自定义文件格式，在 构建时编译为 JavaScript。StyleX 仍可用于这些框架， 但可能需要一些自定义配置。
大型或成长型项目
虽然 StyleX 适用于各种规模的项目，但它在大型应用中更能大放 异彩。
由于 StyleX 可编译为原子 class 名称，因此随着项目的增长，CSS 打包的 大小也会逐渐减小，这对性能大有裨益。
可重用组件
用于可重用的 UI 组件时，StyleX 的优势最大。
StyleX 赋能开发者构建具有默认样式_并且_仍然支持定制的 UI 组件。
此外，这种一致性还能通过将这些组件发布到 NPM 来实现共享。 只要组件的使用者也使用 StyleX，那么 无需任何额外配置，样式就能被正确地合并和组合。