[SpeedDial] FabProps not taking style set in classes: {{...}}

Applying style to FabProps within SpeedDial as we did in 4.11.x is not working. Here is a code snippet, the commented out section worked in 4.11.x and the line after it is the code that works now:

                // classes: {
                //     primary: classes.fabRoot,
                // },
                className: classes.fabRoot,
            }}

We only used a single style for this so moving “className: classes.fabRoot” out of classes will work fine but for anyone who used more than one style depending on “primary”, “root”, “sizeSmall” or any other categories in classes, this may not work.

I’ll attach the element listing for the broken button (with classes.fabRoot defined in classes), it has a blue background. and the element listing for the working button (with classes.fabRoot defined outside of classes) has the grey background with the style circled.

• 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 😯

Old style code for 4.11.x doesn’t work for the SpeedDial button

Expected Behavior 🤔

Expected same styling syntax to work since I couldn’t find anything in documentation that indicating things have changed.

Steps to Reproduce 🕹

~https://codesandbox.io/s/basicspeeddial-material-demo-forked-x3bcj?file=/demo.js~ https://codesandbox.io/s/nameless-haze-8q94d?file=/demo.js:0-1594 I hope this link works.

Steps:

1. uncomment out any one of the lines 44, 45, 47
2. you can see depending on the line that is uncommented, at least for me, only line 47 applies styling to the button

Context 🔦

My button looks gigantic and the wrong color 😉

Your Environment 🌎

`npx @material-ui/envinfo`

  npx: installed 2 in 1.751s

  System:
    OS: macOS 11.2.2
  Binaries:
    Node: 14.15.5 - /usr/local/bin/node
    Yarn: Not Found
    npm: 6.14.11 - /usr/local/bin/npm
  Browsers:
    Chrome: 89.0.4389.114
    Edge: Not Found
    Firefox: Not Found
    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.30 => 5.0.0-alpha.30 
    @material-ui/icons: ^5.0.0-alpha.28 => 5.0.0-alpha.28 
    @material-ui/lab: ^5.0.0-alpha.29 => 5.0.0-alpha.30 
    @material-ui/styled-engine:  5.0.0-alpha.25 
    @material-ui/styles:  5.0.0-alpha.30 
    @material-ui/system:  5.0.0-alpha.29 
    @material-ui/types:  5.1.7 
    @material-ui/unstyled:  5.0.0-alpha.30 
    @material-ui/utils:  5.0.0-alpha.29 
    @types/react: ^17.0.3 => 17.0.3 
    react: ^16.14.0 => 16.14.0 
    react-dom: ^16.14.0 => 16.14.0 
    styled-components: ^5.2.3 => 5.2.3 
    typescript: ^4.2.3 => 4.2.3 ```
</details>

[eps1lon]

Right, forgot about that. I seem to remember similar issues in the past with JSS components.

[mnajdova]

I’d vote we go with Option 2. I like Option 3 too, but in comparison to v4 where we were actually using it, now it is handled in a method outside of the render tree, so it is easier to forget to add it, as it is not used anywhere in the render method of the component.