5.0.0-alpha.21 - "styled" Button/IconButton is breaking implementations from prior version

[mainfraame]

When upgrading to the latest build, I noticed that a lot of the button styles are broken when using styled-engine (styled) to create custom button styles.

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

After looking into the issue, I noticed that ButtonBase now includes some reset styling: eg, padding: 0, margin: 0, border: 0, etc.

// @material-ui/core/ButtonBase/ButtonBase.js

export const ButtonBaseRoot = experimentalStyled('button', {}, {
  name: 'MuiButtonBase',
  slot: 'Root',
  overridesResolver
})({
  display: 'inline-flex',
  alignItems: 'center',
  justifyContent: 'center',
  position: 'relative',
  boxSizing: 'border-box',
  WebkitTapHighlightColor: 'transparent',
  backgroundColor: 'transparent',
  // Reset default value
  // We disable the focus ring for mouse, touch and keyboard users.
  outline: 0,
  border: 0,
  margin: 0,
  // Remove the margin in Safari
  borderRadius: 0,
  padding: 0,
  // Remove the padding in Firefox
  cursor: 'pointer',
  userSelect: 'none',
  verticalAlign: 'middle',
  MozAppearance: 'none',
  // Reset
  WebkitAppearance: 'none',
  // Reset
  textDecoration: 'none',
  // So we take precedent over the style of a native <a /> element.
  color: 'inherit',
  '&::-moz-focus-inner': {
    borderStyle: 'none' // Remove Firefox dotted outline.

  },
  '&.Mui-disabled': {
    pointerEvents: 'none',
    // Disable link interactions
    cursor: 'default'
  },
  '@media print': {
    colorAdjust: 'exact'
  }
});

Expected Behavior 🤔

It seems that switching Button (and all applicable components) over to use emotion has caused some major styling bugs for my big project. In my opinion, these properties used to "reset" the button/a element for all browsers do not belong at the component level, but should be injected via CssBaseline. Ideally, any styled (styled-engine) Button / IconButton components should work seamlessly between prior 5.0.0 versions and the current alpha release.

I believe part of this issue may be due to the change that injects some global stylings for the buttons (as mentioned in PRs). It seems to inject those global styles with precedence over any styling applied via styled from styled-engine. Maybe I'm missing something, but I am using the correct StyleProvider from styled-engine with injectFirst set to true.

Steps to Reproduce 🕹

To reproduce, simply create a styled (style-engine) Button using the previous version and the current version. You should see stark differences in padding/margin/border/etc.

Context 🔦

Your Environment 🌎

5.0.0-alpha.21

[oliviertassinari]

Duplicate of #24109