score:3

Accepted answer

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


Related Query

More Query from same tag