跳至主要内容

使用样式

一旦定义了样式，就可以将其转换为 props，并使用 stylex.props 函数将其扩展到 HTML 元素上。stylex.props 函数在 HTML 元素上设置适当的 className prop，并且在使用 动态样式 时设置 style prop。

<div {...stylex.props(styles.base)} />

虽然这是最简单的情况，但合并多个样式对象、有条件地使用它们甚至跨模块边界组合样式都是微不足道的。

对于 Solid、Svelte、Qwik、Vue 和其他框架：stylex.attrs

对于期望 class 而不是 className 的框架，请改用 style.attrs。否则，用法与 stylex.props 相同。

stylex.attrs 还会将任何 style 值转换为字符串，这对于服务器端渲染和不接受 style 对象的框架很有用。

合并样式​

stylex.props 函数可以接受样式列表并以确定性方式合并它们，其中“最后应用的样式始终有效”。

假设定义了几个样式对象，如下所示

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

const styles = stylex.create({
  base: {
    fontSize: 16,
    lineHeight: 1.5,
    color: 'grey',
  },
  highlighted: {
    color: 'rebeccapurple',
  },
});

<div {...stylex.props(styles.base, styles.highlighted)} />;

生成的 HTML 元素将具有紫色文本，因为该样式最后应用。相反，如果样式的顺序相反，则文本将为灰色。

<div {...stylex.props(styles.highlighted, styles.base)} />

注意：样式定义的顺序不会影响生成的样式，只会影响它们应用到 HTML 元素的顺序。

类似于 Object.assign

理解 stylex.props 函数的一个简单方法是，它执行 Object.assign 所执行的操作。它合并多个对象，后面的对象优先于前面的对象。

实际实现针对性能进行了优化。

条件样式​

可以通过使用常见的 JavaScript 模式（如三元表达式和 && 运算符）在运行时有条件地应用样式。stylex.props 会忽略虚假值，例如 null、undefined 或 false。

<div
  {...stylex.props(
    styles.base,
    props.isHighlighted && styles.highlighted,
    isActive ? styles.active : styles.inactive,
  )}
/>

样式变体​

一种称为“变体”的常见样式模式允许您根据名为 variant 的 prop 的值应用可能的样式列表之一。StyleX 支持此模式，无需额外的 API。相反，可以使用对象属性查找来实现相同的结果。

首先，可以使用样式对象的相应变体名称定义每个变体。

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

const styles = stylex.create({
  violet: {
    backgroundColor: {
      default: 'blueviolet',
      ':hover': 'darkviolet',
    },
    color: 'white',
  },
  gray: {
    backgroundColor: {
      default: 'gainsboro',
      ':hover': 'lightgray',
    },
  },
  // ... more variants here ...
});

然后，可以通过使用变体 prop 作为 styles 对象上的键来应用相应的样式。

function Button({variant, ...props}) {
  return <button {...props} {...stylex.props(styles[variant])} />;
}

样式作为 props​

尽管 StyleX 鼓励将样式放在一起，但可以在文件和组件边界之间传递和使用样式。将覆盖样式作为 props 传递给组件是一种惯例。

将样式 props 传递给组件​

<CustomComponent style={styles.base} />
危险

stylex.props 函数返回一个包含 className 和 style 的对象。当样式要在组件内合并时，请不要使用它。

// NO!
<CustomComponent style={stylex.props(styles.base)} />

可以使用数组字面量传递多个样式对象，包括条件样式

<CustomComponent style={[styles.base, isHighlighted && styles.highlighted]} />
Prop 名称是任意的

style 是一个任意的 prop 名称。您可以为代码库选择自己的 prop 名称。

在组件中接受样式​

接受自定义 StyleXStyles 与接受任何其他 prop 一样简单。并使用 stylex.props 函数应用它。就像本地样式一样。

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

// Local Styles
const styles = stylex.create({
  base: {
    /*...*/
  },
});

function CustomComponent({style}) {
  return <div {...stylex.props(styles.base, style)} />;
}

惯例是在本地样式之后应用作为 props 传递的样式。此约定使设计系统组件易于使用和自定义。

“取消设置”样式​

有时，需要删除样式而不是应用样式。虽然 CSS 提供了 initial、inherit、unset 和 revert 等值，但在 StyleX 中执行此操作的最简单解决方案是将值设置为 null。

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

const styles = stylex.create({
  base: {
    color: null,
  },
});

将样式属性设置为 null 会删除 StyleX 为其应用的任何先前样式。