Material UI Toggle Button - can't change background color when selected

Question

I'm trying to use the Material UI Toggle Button kind of like a radio button to give the user 2 choices to a given question.

It's functioning mostly as expected, but when trying to adjust the style for when each toggle button is selected, I can't get the Toggle Button background color to change. I'm using the classes prop on the ToggleButton component, and using the "selected" rule within that prop. Certain css properties (such as padding & boxShadow) are working, but others (including backgroundColor) are not. My goal is to make the Toggle button have a blue background when selected, but so far I can't get it to display differently than the darker grey background when selected.

I'm using React, along with Formik and Formik-Material-UI. Here is my code:

const useStyles = makeStyles((theme) => ({
  toggleButton: {
    backgroundColor: 'blue',
    border: [10, 'solid', 'black'],
    padding: 10,
    boxShadow: [
      [0, 0, 0, 1, 'blue'],
    ],

  }
}));

export function ScheduleAndServices(props) {
  const classes = useStyles(props);

return (

            <Field 
              component={ToggleButtonGroup} 
              name="requestType" 
              type="checkbox" 
              exclusive
            >
              <ToggleButton 
                value="ps" 
                aria-label="Temporary/Occasional" 
                selected={values.requestType === "ps" ? true : false}
                classes={{selected: classes.toggleButton}}
              >Temporary/Occasional   
              </ToggleButton>
              
              <ToggleButton 
                value="reg" 
                aria-label="Regular"
                selected={values.requestType === "reg" ? true : false}
              >Regular
              </ToggleButton>
            </Field>
);
}

If some styles are working and some are not, it's likely an issue with CSS specificity. The built in CSS from Material UI is more specific than your selectors are. However, to confirm, it'd be better if we had a codesandbox to work from. — technicallynick, Sep 19 '20 at 23:46

score 4 · Answer 1 · answered Aug 24 '21 at 17:09

4

  const useStyles = makeStyles(theme => ({
    ToggleButton : {
        '&.MuiToggleButton-root.Mui-selected': {
            backgroundColor: theme.palette.common.white,
        }
    }
}));

answered Aug 24 '21 at 17:09

ALI KARAMOOZ

41
3

score 0 · Answer 2 · answered Jun 17 '21 at 08:28

0

Try that in your global css or scss file:

button.MuiToggleButton-root.Mui-selected {
  background-color: #1f792f !important;
  border-color: #000 !important;
}

answered Jun 17 '21 at 08:28

Maicon Ribeiro Esteves

1

1

Please provide an explination as to help anyone who might come across this understnd it – TERMINATOR Jun 17 '21 at 14:06

score 0 · Answer 3 · answered Jul 30 '21 at 20:31

0

Create new class and dont forget to use !important to override the backgroundColor of "Mui-selected" class

classes= useStyle({
newClass { backgroundColor:'red!important'},
})

<ToggleButton 
classes={{ 
selected:clasess.newClass,
.
.
.
}}
value=''
/>

answered Jul 30 '21 at 20:31

Ayoub Benayache

1,046
12
28

score 0 · Answer 4 · answered Nov 15 '22 at 12:31

Thanks for this, @ALI KARAMOOZ If anyone is looking for a solution on MUI v5, this works too using the SX Prop.

<ToggleButton
        sx={{
          "&.MuiToggleButton-root.Mui-selected": {
            backgroundColor: "transparent", //use the color you want
          },
        }}
      >

Material UI Toggle Button - can't change background color when selected

4 Answers4

Linked