[material-ui][Switch] Color issue

[sabbin]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/p/sandbox/switch-mui5-6vfyvs

Steps:

1. Add a switch
2. Set color secondary
3. Observe the root element of the switch

Current behavior 😯

The color from the prop is not applied to the switch-root element. It's applied only to the switch-base element. Leaving out the posibility to target the track, as they are siblings in the switch root element.

Expected behavior 🤔

The color should be present at the root of the component not only to some child

Context 🔦

I am trying to override the secondary color from the theme. I cannot target the track component directly from the colorSecondary rule.

I think the color should be on the switch-root as it's the root of this component. I was able to change it with the + and span but I don't think it should be like this

Your environment 🌎

npx @mui/envinfo

``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ```

[DiegoAndai]

Hey @sabbin, thanks for the report. I agree that we should review this design. I added it to the v7 milestone as that should contain design-related changes.

I was able to change it with the + and span but I don't think it should be like this

You could also use MuiSwitch-colorSecondary + .MuiSwitch-track. It's done similarly in the Material UI codebase 😅