跳到主要内容

StyleX 简介

StyleX 是一套简单易用的 JavaScript 语法和编译器，用于为 web 应用编写 样式。

StyleX 综合了内联样式和静态 CSS 的优点， 避免了它们的缺点。定义和使用样式都被限定在组件内， 并可避免样式的权重（specificity）问题，同时还支持媒体查询等功能。 StyleX 使用无碰撞的原子 CSS 生成经过优化的样式， 比手工编写和维护的样式更出色。

功能概览​

可扩展​

  • 使用原子 CSS（atomic CSS）最大限度地减少输出的 CSS 代码。
  • 即使组件数量增长，CSS 的大小也不会太大。
  • 即便代码不断膨胀，样式仍能保持可读性和可维护性。

可预测​

  • 应用在某个 HTML 元素上的 class 名称只能为该元素赋予样式。
  • 没有权重（specificity）问题。
  • “最后赋予的样式起决定作用！”

可组合​

  • 根据条件判断应用哪个样式。
  • 跨组件和文件边界合并和组合任意样式。
  • 使用本地常量和表达式保持样式的简洁性。即便样式重复，也无需担心性能问题。

速度快​

  • 无运行时样式注入。
  • 所有样式在编译阶段都被打包到一个静态 CSS 文件中。
  • 运行时经过优化，利于 class 名称合并。

类型安全​

  • 型安全的 API。
  • 类型安全的样式。
  • 类型安全的主题。

使用 StyleX​

配置编译器​

import plugin from '@stylexjs/rollup-plugin';

const config = () => ({
  plugins: [
    plugin({ ...options })
  ]
})

export default config;

定义样式​

样式是使用对象语法和 create() API 定义的。

import * as stylex from '@stylexjs/stylex';

const styles = stylex.create({
  root: {
    width: '100%',
    maxWidth: 800,
    minHeight: 40,
  },
});

通过增加属性键值对以及多次调用 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 React from 'react';
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 的优势最大。

多年来，我们不得不在 “设计系统” 组件 和 “无头（Headless）” 组件之间做出选择，前者自带样式，但难以自定义， 后者则完全没有样式。

StyleX 使开发人员能够构建具有默认样式并可自定义的 UI 组件。

此外，这种一致性还能通过将这些组件发布到 NPM 来实现共享。 只要组件的使用者也使用 StyleX，那么 无需任何额外配置，样式就能被正确地合并和组合。