Material-UI: Customise theme for hover state

Viewed 123

I am trying to customise MUI V5 theme to define colours of a design system for all components according to variant, color and state(hover).

I tried to follow the approach mentioned in: https://mui.com/blog/callback-support-in-style-overrides/ and it works fine when I tried it for MuiButton as shown below. but to apply the design system I have to write the same conditions for all defined components(Fab, chip, selector,...) with all supported colors and variants :

MuiButton: {
   defaultProps: {
        variant: 'contained',
       },
   styleOverrides:{
      root: ({ ownerState, theme }) => ({
            ...(ownerState.color === 'error' && {
              ...(ownerState.variant === 'contained' &&{
                      '&:hover':{
                          backgroundColor: '#530F00',
                       }
              }),
            ...(ownerState.variant === 'outlined' &&{
               borderColor: '#D48E80',
               '&:hover':{
                   backgroundColor: '#F8EDEB',
                }
           }),
      }),
   },
},

My question: Is there a general way to define styles for all components with same variants? Or is there a better way to achieve this?

0 Answers
Related