配置 sx 属性

了解用于扩展或更改 sx 属性行为的实验性 API。

扩展 sx 属性

您可以通过扩展主题内的 unstable_sxConfig 选项，向 sx 属性添加要处理的新键，如下所示

<ThemeProvider theme={customTheme}>
  <Box sx={{ size: 10, border: 1 }} />
</ThemeProvider>

<ThemeProvider theme={customTheme}>
  <Box sx={{ size: 10, border: 1 }} />
</ThemeProvider>

按 Enter 开始编辑

覆盖现有行为

也可以更改 sx 属性的一些现有行为。例如，在某些设计系统中，边框半径需要限制为特定值，而不是像 MUI 系统默认的那样允许使用任何数字。您可以通过为 borderRadius 属性提供自定义配置来更改此行为

<ThemeProvider theme={theme}>
  <Box sx={{ borderRadius: 'sm', border: 1, p: 4 }} />
  <Box sx={{ borderRadius: 'md', border: 1, p: 4 }} />
  <Box sx={{ borderRadius: 'lg', border: 1, p: 4 }} />
</ThemeProvider>

<ThemeProvider theme={theme}>
  <Box sx={{ borderRadius: 'sm', border: 1, p: 4 }} />
  <Box sx={{ borderRadius: 'md', border: 1, p: 4 }} />
  <Box sx={{ borderRadius: 'lg', border: 1, p: 4 }} />
</ThemeProvider>

按 Enter 开始编辑

API

unstable_sxConfig 内配置的每个值都接受以下属性

cssProperty (string [可选]): 指示 CSS 属性，如果它与键不同
themeKey (string [可选]): 主题映射的路径
transform ((cssValue: unknown, userValue: unknown) => number | string | React.CSSProperties | CSSObject [可选]): 允许用户定义一个函数，该函数可以在返回值之前转换值
style ((props: any) => CSSObject [可选]): 提供最大的可定制性。请注意，您需要确保可以处理断点值