Globais

A chave overrides permite que você customize a aparência de todas as instâncias de um tipo de componente, enquanto a propriedade chave permite que você altere os valores padrão das propriedades de um componente.

CSS

Quando as variáveis de configuração não são poderosas o suficiente, você pode tirar vantagem com o overrides, chave do theme para potencialmente alterar cada estilo único injetado por Material-UI no DOM. Esse é um recurso realmente poderoso.

const theme = createTheme({
  overrides: {
    // Nome da folha de estilo ⚛️
    MuiButton: {
      // Nome da regra
      text: {
        // Algum CSS
        color: 'white',
      },
    },
  },
});

A lista desses pontos de customização de cada componente está documentada na seção API do componente. Por exemplo, você pode dar uma olhada no Botão. Alternativamente, você pode sempre dar uma olhada na implementação.

CSS global

Se você estiver usando o componente CssBaseline para aplicar o reset global, ele pode também ser usado para aplicação de estilos globais. Por exemplo:

const theme = createTheme({
  overrides: {
    MuiCssBaseline: {
      '@global': {
        html: {
          WebkitFontSmoothing: 'auto',
        },
      },
    },
  },
});

// ...
return (
  <ThemeProvider theme={theme}>
    <CssBaseline />
    {children}
  </ThemeProvider>
);

Propriedades padrão

Você pode alterar as propriedades padrão de todos os componentes de Material-UI. A chave props é exposta no theme para estas situações de uso.

const theme = createTheme({
  props: {
    // Nome do componente ⚛️
    MuiButtonBase: {
      // As propriedades padrão para mudar
      disableRipple: true, // Sem efeito cascata, em toda a aplicação 💣!
    },
  },
});