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

Duplicates

[X] I have searched the existing issues

Latest version

[X] 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 🌎

`npx @mui/envinfo`

``` 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)

mui / material-ui