[Button] styled overrides of variants as generated by the jss-to-styled codemod is not applied

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

Style overrides made with the styled function are not applied to the Button component when the styles are specified with the button class name with the variant suffix, like the & .MuiButton-contained selector.

const StyledButton = styled(Button)<ButtonProps>(
  ({ theme, color = "primary" }) => ({
    "& .MuiButton-contained": {
      backgroundColor: "red",
      "&:hover": {
        color: theme.palette[color].main,
        backgroundColor: "white"
      }
    }
  })
);

export default function MyButton(
  props: Pick<ButtonProps, "variant" | "color" | "children">
) {
  return <StyledButton {...props} />;
}

This is how the jss-to-styled code mod genreates the upgrade from the old JSS solution. With the difference of the class name prefix is matching the created component name, in this case MyButton instead of MuiButton, but this does not work either.

Expected behavior 🤔

The styles should be applied to the contained variant. In the example this means that the background color should be red and the hover color white.

Steps to reproduce 🕹

See codesandbox example: https://codesandbox.io/s/mui-v5-styled-button-override-probs-hdr79

Edit1:

• This is a working example with JSS: https://github.com/Lani/mui-jss-styled-example/tree/working-jss-code
• The main branch contains the result after the v5.0.0/jss-to-styled codemod: https://github.com/Lani/mui-jss-styled-example/commit/a0b777d4353b9b1e7894b606a5bc8111602b1dc6

Context 🔦

I'm trying to run the jss-to-styled codemod to minimize the manual work that needs to be done when upgrading from Material-UI v4 to MUI v5.

Your environment 🌎

 System:
    OS: Windows 10 10.0.19042
  Binaries:
    Node: 14.15.4 - C:\Tools\nodejs\node.EXE
    Yarn: Not Found
    npm: 6.14.10 - C:\Tools\nodejs\npm.CMD
  Browsers:
    Chrome: 95.0.4638.69
    Edge: Spartan (44.19041.1266.0), Chromium (96.0.1054.29)
  npmPackages:
    @emotion/react: ^11.5.0 => 11.5.0
    @emotion/styled: ^11.3.0 => 11.3.0
    @mui/icons-material: ^5.1.0 => 5.1.0
    @mui/lab: ^5.0.0-alpha.56 => 5.0.0-alpha.56
    @mui/material: ^5.1.0 => 5.1.0
    @mui/styles: ^5.1.0 => 5.1.0
    @mui/system: ^5.1.0 => 5.1.0
    @mui/types:  7.1.0
    @types/react:  17.0.34
    react: ^17.0.2 => 17.0.2
    react-dom: ^17.0.2 => 17.0.2
    typescript:  4.4.4

Note: Local MUI version tested is v5.1.0, but the codesandbox is using v5.2.0.

Tested on Windows in:
Microsoft Edge: 96.0.1054.29 (Official build) (64-bit)
Firefox: 94.0.2 (64-bit)

Start with the styled(Button) example and the linked CodeSandbox, then compare the working JSS example with the jss-to-styled codemod result. Reproduce the contained variant override and verify that its background and hover styles are applied as expected.