[Button] className is not the last class applied to a button

• 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 value of the className property is not the last class name applied to a button.

This seems to be a transpile issue problem because the source code clearly puts the className value last. See: https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Button/Button.js#L307

Expected Behavior 🤔

When passing a className property:

<Button variant="contained" color="primary" className="test-class">Test</Button>

The class test-class should be after all the button classes. However it appears before some of the button classes:

<button class="MuiButtonBase-root MuiButton-root MuiButton-contained test-class MuiButton-containedPrimary" tabindex="0" type="button"><span class="MuiButton-label">Test</span><span class="MuiTouchRipple-root"></span></button>

Steps to Reproduce 🕹

https://codesandbox.io/s/button-classname-issue-bs6m2

Steps:

1. Create a Button with contained / color variants
2. Pass a className attribute
3. Check the generated HTML

Note that in Material v3 it works as expected. I was able to reproduce the problem in v4.0.0 and v4.9.5 (I didn’t check with intermediate versions).

Context 🔦

This seems to be a bug in transpile. The original code from Button (https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Button/Button.js#L307https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Button/Button.js#L307) is transpiled to this:

return React.createElement(ButtonBase, _extends({
    className: clsx(classes.root, classes[variant], className, color === 'inherit' ? classes.colorInherit : color !== 'default' && classes[`${variant}${capitalize(color)}`], size !== 'medium' && [classes[`${variant}Size${capitalize(size)}`], classes[`size${capitalize(size)}`]], disableElevation && classes.disableElevation, disabled && classes.disabled, fullWidth && classes.fullWidth),
    component: component,
    disabled: disabled,
    focusRipple: !disableFocusRipple,
    focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
    ref: ref,
    type: type
  }, other), React.createElement("span", {
    className: classes.label
  }, startIcon, children, endIcon));

Note the className attribute that appears before color === 'inherit'. Is this a Babel bug?

Your Environment 🌎

Tech	Version
Material-UI	v4.9.5
React	16.12.0
Browser	Chrome

[dfernandez-asapp]

Ok, my bad the order doesn’t matter. I got an instant of craziness due to hours of bug fixing. Probably the issue is caused by a declaration order change between versions. Going to close this, and dig more on why the computed CSS is different in my case. Sorry for the back and forward.

[eps1lon]

I found a slight difference in one of our pages that was caused by the order

The order of the classes in the class attribute has no effect on styling. Only specificity and order of the declarations has an effect. Could you share an example where the order affects styles?