Advanced 进阶

在这里，你可以找到如何在你的自定义组件中使用系统（system）的例子。

将 sx 属性添加到你的自定义组件

The unstable_styleFunctionSx utility adds the support for the sx prop to your own components. Normally you would use the Box component from @material-ui/core at the root of your component tree. If you would like to use the system independently from Material-UI, the unstable_styleFunctionSx utility will give you the same capabilities, while having a smaller bundle size.

<NoSsr>
  <ThemeProvider theme={theme}>
    <Div sx={{ m: 1, p: 1, border: 1 }}>Custom component using the system</Div>
  </ThemeProvider>
</NoSsr>

使用独立的系统工具集

如果你在自定义组件中只需要系统中的一些元素，你可以直接使用和组合不同的风格功能，并将其作为组件属性访问。 You might use this approach if you need smaller bundle size and better performance than using Box, for the price of using a subset of what the sx prop supports, and a different API.

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

const Div = styled.div`
  ${palette}
  ${spacing}
`;

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