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

[Lani]

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: Lani/mui-jss-styled-example@a0b777d

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)

[siriwatknp]

@Lani Thanks for reporting the issue. However, the jss-to-styled code mod is aimed to transform useStyles|makeStyles that are used in multiple components.

In your case, the useStyles is used for only a button which I don't think we can cover all of the cases like this (we will need to map all classes for all components).

What I can do is to update the doc to exclude this case from the code mod and let the developers handle them manually. Sorry for the inconvenience.