Глобальная настройка

The overrides key enables you to customize the appearance of all instances of a component type, while the props key enables you to change the default value(s) of a component's props.

CSS

Если настроек конфигурации недостаточно, можно использовать ключ overrides у объекта theme, чтобы изменить абсолютно любой стиль, который Material-UI вносит в DOM. Это действительно мощная штука.

{{"Демо": "pages/customization/globals/GlobalCss.js"}}

const theme = createMuiTheme({
  overrides: {
    // Style sheet name ⚛️
    MuiButton: {
      // Name of the rule
      text: {
        // Some CSS
        color: 'white',
      },
    },
  },
});

{{"Демо": "pages/customization/globals/GlobalCss.js"}}

Список всех возможных кастомизаций для компонент задокументирован в разделе Component API. Например, вы можете взглянуть на кнопку Button.

Глобальный CSS

If you are using the CssBaseline component to apply global resets, it can also be used to apply global styles. Например:

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

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

Настройка props

Вы можете изменить свойство props любой из компонент Material-UI. A props key is exposed in the theme for this use case.

{{"Демо": "pages/customization/globals/GlobalCss.js"}}

const theme = createMuiTheme({
  props: {
    // Название компоненты
    MuiButtonBase: {
      // Пример одного из стандартных свойств props
      disableRipple: true, // Скажи НЕТ эффекту расходящихся волн 💣!
      },
  },
});