跳至主要内容

StyleX 简介

StyleX 是一种简单易用的 JavaScript 语法和编译器，用于为 Web 应用设置样式。

StyleX 结合了内联样式和静态 CSS 的优势，并避免了它们的缺点。定义和使用样式只需要组件内部的本地知识，避免了特异性问题，同时保留了媒体查询等功能。StyleX 使用无冲突的原子 CSS 构建优化样式，这优于手动编写和维护的样式。

功能一览​

可扩展​

  • 使用原子 CSS 最小化 CSS 输出。
  • 即使组件数量增加，CSS 大小也会趋于稳定。
  • 在不断增长的代码库中，样式保持可读性和可维护性。

可预测​

  • 元素上的类名只能直接为该元素设置样式。
  • 没有特异性问题。
  • “最后应用的样式始终优先！”

可组合​

  • 有条件地应用样式。
  • 跨组件和文件边界合并和组合任意样式。
  • 使用本地常量和表达式来保持样式的 DRY。或者重复样式而无需担心性能。

快速​

  • 没有运行时样式注入。
  • 所有样式都在编译时捆绑到一个静态 CSS 文件中。
  • 合并类名的优化运行时。

类型安全​

  • 类型安全的 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 编译为原子类名，因此一个很大的性能优势是，随着项目的增长，CSS 捆绑包的大小会趋于稳定。

可重用组件​

当与可重用的 UI 组件一起使用时，StyleX 的优势最大。

多年来，我们不得不选择带有内置样式但难以自定义的“设计系统”组件，或者完全未设置样式的“无头”组件。

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

此外，这种一致性使得能够通过将这些组件发布到 NPM 来共享它们。只要组件的使用者也使用 StyleX，样式就会正确合并和组合，无需任何其他配置。