[material-ui][Switch] Convert to support CSS extraction

[alexfauquette]

Part of #41273

The customization demo is broken, because styles does not apply on the root component.

For example in the ios switch example, the width, height and padding are not applied. But other classes are working fine 🤔

const IOSSwitch = styled((props: SwitchProps) => (
  <Switch focusVisibleClassName=".Mui-focusVisible" disableRipple {...props} />
))(({ theme }) => ({
  width: 42,
  height: 26,
  padding: 0,
  ...

About the overridesResolver I'm not sure about how the new styled react to it. It's the first time I see it used with an array

 overridesResolver: (props, styles) => {
    const { ownerState } = props;
    return [
      styles.switchBase,
      { [`& .${switchClasses.input}`]: styles.input },
      ownerState.color !== 'default' && styles[`color${capitalize(ownerState.color)}`],
    ];
  },

[mui-bot]

Netlify deploy preview

https://deploy-preview-41367--material-ui.netlify.app/

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 5596f3f

[siriwatknp]

Argos is failing, the variants conversion is somehow wrong.

[alexfauquette]

Argos is failing, the variants conversion is somehow wrong.

Struggled a bit to find why it's failing in the docs and not in the app.

Seems it's because I verified that mainChannel exist but it's only here if you use CSS vars

- .filter(([, value]) => value.main && value.mainChannel && value.light) // check all the used fields in the style below
+ .filter(([, value]) => value.main && value.light) // check all the used fields in the style below

[siriwatknp]

The styles for disabled looks wrong from argos.

[siriwatknp]

Suggested change

	},
	[`&.${switchClasses.disabled}`]: {
	[`&.${switchClasses.disabled}`]: {
	},

disabled style should be in checked to fix this:

[siriwatknp]

Suggested change

color={color}

No need to pass color as a prop here, the ownerState is enough.

[alexfauquette]

legacy of the debug session 🙈

[siriwatknp]

👍 Nice!

[beaktor]

This line broke our production code. We have an entry in the theme object that is sometimes undefined. This code doesn't handle that and assumes all values should be an object (which they are typically), but can also be numbers and strings. It doesn't fail there, but when the value is undefined.

Suggested change

	.filter(([, value]) => value.main && value.light) // check all the used fields in the style below
	.filter(([, value]) => value?.main && value?.light) // check all the used fields in the style below

[siriwatknp]

Noted. will fix it soon.

[siriwatknp]

Could you create a new issue so that I can assign to myself?