設定 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 System 的預設值一樣允許使用任何數字。您可以透過為 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 [optional])：指示 CSS 屬性，如果它與鍵不同
themeKey (string [optional])：主題映射的路徑
transform ((cssValue: unknown, userValue: unknown) => number | string | React.CSSProperties | CSSObject [optional])：讓使用者定義一個函數，可以在傳回值之前轉換該值
style ((props: any) => CSSObject [optional])：提供最大的可自訂性。請注意，您需要確保可以處理斷點值