Material-ui: [Switch / createMuiTheme] How to override style when two classes applied

Created on 21 Sep 2017 · 5Comments · Source: mui-org/material-ui

I'm trying to re-style the Switch component, but having trouble finding a way to style the bar in the background the button.

[x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

N/A

Current Behavior

N/A

Steps to Reproduce (for bugs)

N/A

Context

When the Switch component is checked the following styling is applied:

.MuiSwitch.checked-1 + .MuiSwitch.bar-1 {
  opacity: 0.5;
  backgroud-color: #3f51b5;
}

When creating an theme, how does one override the background color in the style above?

const theme = createMuiTheme({
  overrides: {
    checked: {
      color: lightBlue['A700'] // changes switch handle 
    },
    bar: {
      // changing the backgroundColor here changes it for disabled & checked
    }
  }
});

I can change it by overriding palette.primary.500. I'm wondering if it's possible in the override section?

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | 1.0.0-beta.11 |
| React | 15.6.1 |
| browser | chrome |

Switch question

Source

willfarrell

Most helpful comment

You have many alternatives.
If you want to do it with the overrides key, here is the way:

const theme = createMuiTheme({
  overrides: {
    MuiSwitch: {
      checked: {
        color: orange[500],
        '& + $bar': {
          backgroundColor: orange[500],
        },
      },
    },
  },
});

capture d ecran 2017-09-21 a 23 50 35

oliviertassinari on 21 Sep 2017

👍7

All 5 comments

You have many alternatives.
If you want to do it with the overrides key, here is the way:

const theme = createMuiTheme({
  overrides: {
    MuiSwitch: {
      checked: {
        color: orange[500],
        '& + $bar': {
          backgroundColor: orange[500],
        },
      },
    },
  },
});

capture d ecran 2017-09-21 a 23 50 35

oliviertassinari on 21 Sep 2017

👍7

Thanks! A good pattern to know for those fringe cases.

willfarrell on 21 Sep 2017

I know this issue is closed, but I am having trouble styling the switch. I have followed @oliviertassinari 's instructions but the override is not being applied. I have also tried to uses classes to style this component. Shall I open a new issue?

s-wynter on 25 Apr 2018

@s-wynter This issue is outdated. Follow our examples in the selection control documentation.

oliviertassinari on 25 Apr 2018

@s-wynter you may need to add color: 'default' to Switch component props, checkout https://material-ui.com/api/switch/ and you can see it will default to the secondary from theme