[Switch] styleOverrides selector do not appear to work

When writing styleOverrides for a Switch component, writing styles using rule name/global class selectors doesn’t work as expected (compared to writing overrides for other components in the same manner).

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

The overrides are written as they are for other components (e.g., buttons, inputs, etc.), exported, and imported into the top-level createMuiTheme.

function MuiSwitch() {
  return {
    defaultProps: {
      color: 'primary',
    },
    styleOverrides: {
      root: {
        border: '1px solid red !important',
        '&.MuiSwitch-root': {
          border: '1px solid red !important',
        },
        // other selectors defined at
        // the Switch component API doc
        // don't work either
      },
    },
  };
}

export function getSwitchOverrides() {
  return {
    MuiSwitch: MuiSwitch(),
  };
}

Expected Behavior 🤔

The component remains unaffected and reverts to its default appearance, no matter how many selectors/rule names/classes are in the styleOverrides object.

The component should respond to the overrides.

Steps to Reproduce 🕹

https://codesandbox.io/s/thirsty-sun-w3t8h

Steps:

1. Create a switch component.
2. Add overrides to it using the rules/selectors outlined in the documentation.

Context 🔦

While it’s possible to style the Switch component with useStyles, I’d rather have this as part of the overrides, so that no additional CSS is added to the application.

Your Environment 🌎

`npx @material-ui/envinfo`

System:
    OS: macOS 11.2.1
  Binaries:
    Node: 12.19.1 - ~/.nvm/versions/node/v12.19.1/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.6.0 - ~/.nvm/versions/node/v12.19.1/bin/npm
  Browsers:
    Chrome: 89.0.4389.128
    Edge: Not Found
    Firefox: 87.0
    Safari: 14.0.3
  npmPackages:
    @emotion/react: ^11.1.5 => 11.1.5
    @emotion/styled: ^11.1.5 => 11.1.5
    @material-ui/core: ^5.0.0-alpha.28 => 5.0.0-alpha.28
    @material-ui/icons: ^5.0.0-alpha.28 => 5.0.0-alpha.28
    @material-ui/styled-engine:  5.0.0-alpha.25
    @material-ui/styles:  5.0.0-alpha.28
    @material-ui/system:  5.0.0-alpha.28
    @material-ui/types:  5.1.7
    @material-ui/unstyled:  5.0.0-alpha.28
    @material-ui/utils:  5.0.0-alpha.28
    @types/react: 16.9.56 => 16.9.56
    react: 17.0.1 => 17.0.1
    react-dom: 17.0.1 => 17.0.1
    typescript: ~4.0.3 => 4.0.7

[dohomi]

Ok found the NextJS issue: Make sure that there is no own declaration of @emotion/cache inside package.json: https://github.com/dohomi/storyblok-mui-v5-webpack5/commit/d4af9ee813ce3e415bef6342a6ce3fa5f3865b24#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519L20 It seems that the cache otherwise gets out of sync

[mnajdova]

In this component we are not spreading the ...other on the root slot, so there is no theme in the props on the component, hence we get the default theme that doesn’t contain the overrides. This is fixing the issue:

diff --git a/packages/material-ui/src/Switch/Switch.js b/packages/material-ui/src/Switch/Switch.js
index 0914dfb154..1cca404f1d 100644
--- a/packages/material-ui/src/Switch/Switch.js
+++ b/packages/material-ui/src/Switch/Switch.js
@@ -13,7 +13,6 @@ import switchClasses, { getSwitchUtilityClass } from './switchClasses';

 const overridesResolver = (props, styles) => {
   const { styleProps } = props;
-
   return deepmerge(
     {
       ...(styleProps.edge && styles[`edge${capitalize(styleProps.edge)}`]),
@@ -219,7 +218,7 @@ const Switch = React.forwardRef(function Switch(inProps, ref) {
   const icon = <SwitchThumb className={classes.thumb} styleProps={styleProps} />;

   return (
-    <SwitchRoot className={clsx(classes.root, className)} styleProps={styleProps}>
+    <SwitchRoot className={clsx(classes.root, className)} styleProps={styleProps} theme={other.theme}>
       <SwitchSwitchBase
         className={classes.switchBase}
         type="checkbox"

@sparkpunk would you be interested in creating a PR? 😃