Skip to content
Edit this page

Components

The theme's `components` key allows you to customize a component without wrapping it in another component. You can change the styles, the default props, and more.

Global style overrides

You can use the theme's styleOverrides key to potentially change every single style injected by Material-UI into the DOM.

const theme = createTheme({
  components: {
    // Name of the component
    MuiButton: {
      styleOverrides: {
        // Name of the slot
        root: {
          // Some CSS
          fontSize: '1rem',
        },
      },
    },
  },
});

<ThemeProvider theme={theme}>
  <Button>font-size: 1rem</Button>
</ThemeProvider>

The list of each component's classes is documented under the CSS section of its API page.

To override a lab component's styles with TypeScript, check this section of the documentation.

Default props

You can change the default of every prop of a Material-UI component. A defaultProps key is exposed in the theme's components key for this use case.

const theme = createTheme({
  components: {
    // Name of the component
    MuiButtonBase: {
      defaultProps: {
        // The props to change the default for.
        disableRipple: true, // No more ripple!
      },
    },
  },
});

<ThemeProvider theme={theme}>
  <Button>Change default props</Button>
</ThemeProvider>

To override lab component styles with TypeScript, check this page.

Adding new component variants

You can use the variants key in the theme's components section to add new variants to Material-UI components. These new variants can specify what styles the component should have when specific props are applied.

The definitions are specified in an array, under the component's name. For each of them a CSS class is added to the HTML <head>. The order is important, so make sure that the styles that should win are specified last.

const theme = createTheme({
  components: {
    MuiButton: {
      variants: [
        {
          props: { variant: 'dashed' },
          style: {
            textTransform: 'none',
            border: `2px dashed grey${blue[500]}`,
          },
        },
        {
          props: { variant: 'dashed', color: 'secondary' },
          style: {
            border: `4px dashed ${red[500]}`,
          },
        },
      ],
    },
  },
});

If you're using TypeScript, you'll need to specify your new variants/colors, using module augmentation.

declare module '@material-ui/core/Button' {
  interface ButtonPropsVariantOverrides {
    dashed: true;
  }
}

<ThemeProvider theme={theme}>
  <Button variant="dashed" sx={{ m: 1 }}>
    Dashed
  </Button>
  <Button variant="dashed" color="secondary" sx={{ m: 1 }}>
    Secondary
  </Button>
  <Button variant="dashed" size="large" sx={{ m: 1 }}>
    Large
  </Button>
  <Button variant="dashed" color="secondary" size="large" sx={{ m: 1 }}>
    Secondary large
  </Button>
</ThemeProvider>

Theme variables

Another way to override the look of all component instances is to adjust the theme configuration variables.

const theme = createTheme({
  typography: {
    button: {
      fontSize: '1rem',
    },
  },
});

<ThemeProvider theme={theme}>
  <Button>font-size: 1rem</Button>
</ThemeProvider>