自定义组件

了解如何将 MUI System 与自定义组件一起使用。

将 sx 与自定义组件一起使用

通常，您会在组件树的根部使用 Box 组件，以便使用 sx 属性。如果您想将 sx 与完全自定义（非 MUI）组件一起使用，您可以使用 unstable_styleFunctionSx 实用工具。这为您提供所有相同的功能，并且捆绑包大小更小。

以下演示展示了如何实现此实用工具

带有 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 属性中的特定样式函数，您可以单独导入它们，而不是引入整个包。如果您需要优化以获得尽可能小的捆绑包大小，这将非常有用。

下面的演示说明了它是如何工作的

样式化组件

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 键开始编辑