'Applying Material UI styleOverrides at the component-level with styled()

I'm not sure if this is possible or not, after looking at Material UI's documentation on How to Customize, but I'm trying to isolate styleOverrides for a given component using styled() rather than applying a lot of overrides within a global theme file.

Currently, my theme file looks something like this, with some typography and palette overriding Material UI's default theme:

const theme = createTheme({
  palette: { ...
  },
  typography: { ...
  }
});

When I use a Chip component (rendered in Storybook currently) and pass in success, primary, secondary, etc. into the color prop, the corresponding theme colors are applied. However, when I try to override the theme files, using styled(), the colors defined in the theme are still being applied - as opposed to my overrides defined. My component file looks like the following:

import { styled } from '@mui/material/styles';
import MuiChip, { ChipProps } from '@mui/material/Chip';
    
const Chip = styled(MuiChip)<ChipProps>(({ theme }) => ({
  colorPrimary: {
    backgroundColor: theme.palette.primary.light
  },
  colorSecondary: {
    backgroundColor: theme.palette.secondary.light
  }
}));

export default Chip;

Solution 1:^[1]

You can create your own custom variant and define your own styles to it

const theme = createTheme ({
          components : {    
               MuiButton : {  
                    variants : [ 
                           { props : { variant : 'YouVarName'}, 
                             style: { //..your styles } ,  
                                                             },},

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Moh

'Applying Material UI styleOverrides at the component-level with styled()

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]