跳到主要内容

css.create

如何在 React Strict DOM 中创建静态和动态样式。

警告

在 Web 上，样式编译器和静态类型尚未强制执行可以使用的属性和值的约束（例如，各种简写属性是不允许的）。这是一项正在进行中的工作，取决于 StyleX 的改进。

概述​

css.create 是一个函数，它接受样式对象映射，并返回不透明的 JavaScript 对象，这些对象应该传递给 html.* 元素的 style 属性。你的代码*绝对不能自省或修改返回值*，因为它会被编译成优化的形式。不同平台支持的属性和值的集合记录在 css 部分的兼容性表中。

import { css } from 'react-strict-dom';

const styles = css.create({
  foo: {
    backgroundColor: 'red'
  },
  bar: (color, padding) => ({
    color: color,
    padding: padding
  })
});

API​

样式规则​

create 函数接受一个具名样式规则的对象。这些规则可以在其他地方通过它们的键名引用。

const styles = css.create({
  foo: {
    backgroundColor: 'red'
  }
});

export const foo = styles.foo;

样式规则​

样式规则是样式名称（例如，root）和声明对象（或返回此类对象的函数）的组合。声明对象包含一个或多个样式属性-值对。

const styles = css.create({
  // style rule's name is "foo"
  foo: {
    // declaration
    backgroundColor: 'red'
  }
});

样式规则（函数）​

函数规则在被调用时返回一个声明对象。 这应该只用于定义依赖于组件渲染期间的运行时数据的动态样式（即，无法提前知道的值）。

const styles = css.create({
  bar: (color: string, padding: number) => ({
    color: color,
    padding: padding
  })
});

styles.bar(color, padding)

函数规则可以接受任意数量的参数，但它们必须是简单的标识符。函数规则必须使用显示的箭头语法，并且主体必须是对象字面量。你不能使用具有多个语句、解构或默认值的函数体。

import { css } from 'react-strict-dom';

const styles = css.create({
  dynamic: (r, g, b) => ({
    color: `rgb(${r}, ${g}, ${b})`,
  }),
});

// in a component render
const { red, green, blue } = getColorsFromData(props.data)
styles.dynamic(red, green, blue)

样式值​

样式值可以是字符串、数字、对象、css.firstThatWorks() 的返回值或 null。

const styles = css.create({
  foo: {
    backgroundColor: 'white',
    borderWidth: 10,
    color: {
      default: 'gray',
      ':hover': 'black'
    },
    position: css.firstThatWorks('sticky', 'absolute'),
    textDecorationLine: null
  }
});

样式值（对象）​

对象值用于定义属性的特定状态条件。此对象仅接受某些命名的键，这些键如下：

  • default - 当没有其他状态处于活动状态时，属性的默认值。
  • :hover - 元素被悬停时的值。
  • :focus - 元素被聚焦时的值。
  • :active - 元素被主动按下时的值。
  • ::placeholder - 输入元素的占位符值。
  • @media (...) - 满足给定的媒体查询条件时的值。仅限尺寸和颜色方案。

伪状态示例

const styles = css.create({
  root: {
    color: {
      default: 'black',
      ':hover': 'red',
      ':focus': 'green',
      ':active': 'blue',
    }
  }
});

伪状态的优先级顺序是 active（最高），然后是 focus，然后是 hover（最低）。伪状态目前仅在原生端上支持某些接受相关用户交互的元素。例如，:focus 仅在实现 onFocus 和 onBlur 事件处理程序的原生元素上支持。伪状态字段的值必须是原始类型，不能是另一个样式值对象。

媒体查询示例

const styles = css.create({
  root: {
    color: {
      default: 'black',
      '@media (prefers-color-scheme:dark)': 'white'
    },
    width: {
      default: '100%',
      '@media (min-width:320px)': '800px',
    }
  }
});

在媒体查询中，仅允许将伪状态和伪元素作为嵌套样式值对象的一部分。

const styles = css.create({
  root: {
    color: {
      default: 'black',
      ':hover': 'darkgray',
      '@media (prefers-color-scheme:dark)': {
        default: 'white',
        ':hover': 'lightgray'
      }
    }
  }
});