Avançado

Aqui você pode encontrar exemplos de como você pode usar o sistema em seus componentes customizados.

Adicionando a propriedade sx para seus componentes customizados

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>

Usando utilitários de sistema autônomo

Se você precisar apenas de alguns elementos do sistema em seus componentes customizados, você pode usar diretamente e combinar as diferentes funções de estilo disponíveis, e acessá-las como propriedades de componente. 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>
  );
}