Custom components

Learn how to use MUI System with custom components.

Using sx with custom components

Normally you would use the Box component at the root of your component tree in order to work with the sx prop. If you want to use sx with fully custom (non-MUI) components, you can do so with the unstable_styleFunctionSx utility. This gives you all the same capabilities, and with a smaller bundle size.

The following demo shows how to implement this utility:

Custom component with the sx prop

<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>

Press Enter to start editing

Using standalone system utilities

If you only need specific style functions from the sx prop, you can import them individually rather than pulling in the entire package. This is useful if you need to optimize for the smallest bundle size possible.

The demo below illustrates how this works:

Styled components

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>
  );
}

Press Enter to start editing