“sx”属性

在大多数情况下，可以使用 样式属性 对组件进行主题设置。

然而，在诸如第三方组件、嵌套或伪类选择器之类的不能使用样式属性的情况下，你可以回退到 sx 属性。

sx 属性使你可以向元素添加任何有效的 CSS，同时使用主题中的值以保持样式一致。你可以将 sx 属性接受的样式对象视为 CSS 的超集。

<div
  sx={{
    // values referencing scales defined in a theme
    color: "primary",
    bg: "lightgray",
    fontFamily: "body",

    // raw CSS value
    boxShadow: "0 0 1px 3px rgba(0, 0, 0, .125)",

    // nested
    "> a": {
      color: "secondary",
    },

    // pseudo
    ":after": {
      content: '""',
      position: "absolute",
    },
  }}
/>
 CopyCopy

sx 属性来自 Theme UI。你可以在 Theme UI 文档 中了解更多相关信息。