How can I customize material-ui V1 components across entire application when creating a theme?

Question

in material-ui v0, when creating a theme with const muiThemeV0 = getMuiTheme(theme); i can simply add a property to the themeOptions for each component based on this file: https://github.com/mui-org/material-ui/blob/master/src/styles/getMuiTheme.js (currently on the master branch when writing this question), and can customize not only colors but the theme border-radius etc, and specific components sizes and colors. for example:

const theme = {
  slider: {
    selectionColor:  colors.primary1Color,
    handleFillColor: colors.primary1Color,
    trackSize:       6,
  }
}

I tried going through the https://material-ui-next.com/customization/overrides/ docs, but can't see examples and/or a list of options in the source code like MUI-v0 when i want to use const muiThemeV1 = createMuiTheme(theme); are there any docs for this kind of customization in v1? is this even possible?

Answer 1

In v1, you can use the theme overrides property to customize the styles of a specific component type. Instead of providing theme options for individual components, this feature allows you to customize every style that material-ui injects into the DOM.

You can find a list of the CSS classes for each component on the website (in component API section).

The following example customizes the appearance of the Button component

const theme = createMuiTheme({
  overrides: {
    MuiButton: {
      // override root styles for the button component.
      root: {
        // Name of the rule
        background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
        borderRadius: 3,
        color: 'white',
        height: 48,
        padding: '0 30px',
        marginRight: 32,
      },
      // Custom styles for the raised button variant
      raised: {
        borderRadius: 50,
        color: 'white',
        // Custom hover styles for raised button 
        '&:hover': {
          boxShadow: shadows[4],
        },
        // Custom active styles for raised button
        '&:active': {
          boxShadow: `${shadows[24]} !important`,
        },
      },
    },
  }
});

Live example on code sandbox

Documentation on theme overrides