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.

Default props

You can change the default of every prop of a MUI 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.

Global style overrides

You can use the theme's styleOverrides key to potentially change every single style injected by MUI 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.

Overrides based on props

You can pass a callback as a value in each slot of the component's styleOverrides to apply styles based on props.

The ownerState prop is a combination of public props that you pass to the component + internal state of the component.

const finalTheme = createTheme({
  components: {
    MuiSlider: {
      styleOverrides: {
        valueLabel: ({ ownerState, theme }) => ({
          ...(ownerState.orientation === 'vertical' && {
            backgroundColor: 'transparent',
            color: theme.palette.grey[500],
          }),
        }),
      },
    },
  },
});

Using `sx` (experimental) syntax

If you are not familiar sx, first check out the concept and the difference with the styled.

sx is also compatible with theme style overrides if you prefer the shorthand notation.

Status: Completed

<ThemeProvider theme={finalTheme}>
  <Chip
    color="success"
    label={
      <span>
        <b>Status:</b> Completed
      </span>
    }
    icon={<Check fontSize="small" />}
  />
</ThemeProvider>

Adding new component variants

You can use the variants key in the theme's components section to add new variants to MUI 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 ${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 '@mui/material/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>