Advanced

Here you can find examples of how you can use the system in your custom components.

Adding the sx prop to your custom components

The unstable_styleFunctionSx utility adds the support for the sx prop to your own components. Normally you would use the Box component from @mui/material at the root of your component tree. If you would like to use the system independently from MUI, 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>

Using standalone system utilities

If you only need some elements of the system in your custom components, you can directly use and combine the different style functions available, and access them as component props. 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, PaletteProps, spacing, SpacingProps } from '@mui/system';
import NoSsr from '@mui/base/NoSsr';

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

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