CODEWITHSUNDEEP
cssreactjsmaterial-ui
andorando
andorando

Reputation: 19

How to override nested child component styling in MaterialUI v5?

I have a ToggleButton component that has custom styling. I want to make that Toggle Button component look differently only when it's used as a child (inside) a ToggleButtonGroup. Here is how I'd call the ToggleButtonGroup component:

        <ToggleButtonGroup onChange={()=>{}} ariaLabel='platform'>
          <ToggleButton label='Japan' value='1' selected={true}/>
          <ToggleButton label='China' value='2' selected={false}/>
          <ToggleButton label='Brazil' value='3' selected={false}/>
        </ToggleButtonGroup>

Here is the code for my ToggleButtonGroup component:

const StyledToggleGroup = styled(ToggleOptionsGroup)(
    ({ theme: { palette, spacing } }) => ({
      height: spacing(10),
      borderRadius: '6px',
      boxShadow: 'none',
  
      '&:hover': {
        boxShadow: 'none',
      },
      '&.MuiToggleButtonGroup-root':{
        gap: '0px'
      },
      '&.MuiToggleButton-standard':{
        backgroundColor:'red',
      },
      '&.MuiToggleButtonGroup-grouped.Mui-selected': {
        backgroundColor:'green',
      }
    })
  );


const ToggleButtonGroup:React.FC<ToggleButtonGroupProps> = ({children, onChange, ariaLabel}) =>{

    return(
        <StyledToggleGroup
        exclusive
        onChange={onChange}
        aria-label={ariaLabel}>
        {children}
      </StyledToggleGroup>
    )
}

However, the last two classes:

      '&.MuiToggleButton-standard':{
        backgroundColor:'red',
      },
      '&.MuiToggleButtonGroup-grouped.Mui-selected': {
        backgroundColor:'green',
      }

don't really change anything.

How can I change the styling of my ToggleButton component only when it's passed as a child to the ToggleButtonGroup component?

Upvotes: 0

Views: 699

Answers (1)

John Li
John Li

Reputation: 7447

It seems that class names are correct according to MUI document, the posted code should just need to specify these as children of StyledToggleGroup with a descendant combinator after & for the styles to work:

Tested in a simple demo here: stackblitz

  "& .MuiToggleButton-standard": {
    backgroundColor: "hotpink",
  },
  "& .MuiToggleButtonGroup-grouped.Mui-selected": {
    backgroundColor: "lightblue",
  },

Upvotes: 1

Related Questions