自訂組件

了解如何將 MUI System 與自訂組件一起使用。

將 sx 屬性與自訂組件一起使用

一般來說，您會在組件樹狀結構的根部使用 Box 組件，以便使用 sx 屬性。如果您想將 sx 屬性與完全自訂 (非 MUI) 的組件一起使用，可以使用 unstable_styleFunctionSx 工具。這會提供您相同的功能，並縮小 bundle 大小。

以下範例展示如何實作此工具

具有 sx 屬性的自訂組件

<ThemeProvider theme={theme}>
  <Div sx={{ m: 1, p: 1, border: 1 }}>Custom component with the sx prop</Div>
</ThemeProvider>

<ThemeProvider theme={theme}>
  <Div sx={{ m: 1, p: 1, border: 1 }}>Custom component with the sx prop</Div>
</ThemeProvider>

按下 Enter 鍵開始編輯

使用獨立的系統工具

如果您只需要 sx 屬性中的特定樣式函數，您可以個別匯入它們，而不是拉取整個套件。如果您需要針對最小的 bundle 大小進行優化，這非常有用。

以下範例說明其運作方式

樣式化組件

import * as React from 'react';
import styled from 'styled-components';
import { palette, PaletteProps, spacing, SpacingProps } from '@mui/system';

const Div = styled.div<PaletteProps & SpacingProps>`
  ${palette}
  ${spacing}
`;

export default function CombiningStyleFunctionsDemo() {
  return (
    <Div color="white" bgcolor="palevioletred" p={1}>
      Styled components
    </Div>
  );
}

import * as React from 'react';
import styled from 'styled-components';
import { palette, PaletteProps, spacing, SpacingProps } from '@mui/system';

const Div = styled.div<PaletteProps & SpacingProps>`
  ${palette}
  ${spacing}
`;

export default function CombiningStyleFunctionsDemo() {
  return (
    <Div color="white" bgcolor="palevioletred" p={1}>
      Styled components
    </Div>
  );
}

按下 Enter 鍵開始編輯