Skip to main content

StyleX 简介

StyleX 是一个简单的、容易上手的 JavaScript 语法和编译器，用于为 Web 应用程序添加样式。

StyleX 结合了内联样式和静态 CSS 的优点，弃置了它们的糟粕。定义和使用样式只和当前组件有关系， 在保留了一些特性像媒体查询的同时，避免了特定的问题。StyleX 使用无冲突的原子 CSS 构建优化的样式， 这比手工编写和维护的样式更好。

特性​

可扩展性​

  • 用原子化 CSS 最小化样式表的大小。
  • 无论组件数量增长到多少，CSS 文件大小都保持稳定。
  • 样式表一直保持可读性和可维护性。

结果可预期​

  • 样式只能直接应用到当前类名的元素。
  • 没有特异性问题。
  • “最后应用的样式总是胜出！”

可组合​

  • 条件渲染样式。
  • 在组件和文件间合并和组合任意样式。
  • 用局部常量和表达式避免重复写样式。就算把样式写重了也不用担心性能问题。

快速​

  • 没有运行时的样式注入。
  • 所有样式都在编译时打包到静态的 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: 'lightred',
    borderColor: 'darkred',
  },
  green: {
    backgroundColor: 'lightgreen',
    borderColor: 'darkgreen',
  },
});

使用样式​

通过使用 props() 函数，应用样式。样式可以使用标准的 JavaScript 表达式来实现组合和条件渲染。

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

const styles = 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 适用于各种规模的项目，但它在大的项目中更能大放异彩。

对于一般项目来说，随着项目的增长，CSS 捆绑包的规模会越来越大。但是 StyleX 可以编译成原子类名，它能避免这种情况发生。

可复用的 UI 组件​

StyleX 的好处在于它可以和可复用的 UI 组件一起使用。

多年来，我们不得不在“设计系统”组件和“无样式”组件之间做出选择。前者的样式是固定的，但是很难定制；而后者则完全没有样式。

StyleX 赋予开发者构建高可复用 UI 组件的能力，这些组件可以有默认样式，同时还可以定制。

此外，可以通过将这些组件发布到 NPM 来共享这些组件。只要组件的使用者也在使用 StyleX，样式就会被正确地合并和组合，而无需任何额外的配置。