material-ui: Props that are invalid HTML attributes are passed to DOM elements by `styled()`

When using styled() to style a regular (non-component) dom element, all props are being forwarded, which deviates from the behavior of emotion styled, which only forwards props that are valid html attributes.

• 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 styled() function provided by MUI forwards invalid props to html dom elements.

Expected Behavior 🤔

While providing props to the styled component is useful, having them escape to the actual DOM elements is not. MUI styled should follow the behavior of Emotion styled.

By default, Emotion passes all props (except for theme) to custom components and only props that are valid html attributes for string tags. You can customize this by passing a custom shouldForwardProp function. You can also use @emotion/is-prop-valid (which is used by emotion internally) to filter out props that are not valid as html attributes.

Steps to Reproduce 🕹

Steps:

1. https://codesandbox.io/s/styled-prop-forwarding-to-dom-lhj9z?file=/src/Demo.js
2. The affected dom element is logged to the console for convenience, it has the color and spacing attributes still.

Workaround

To reduce boilerplate code for individually filtering props in a custom function for shouldForwardProps, I emulated the behavior of emotion for string tags.

import isPropValid from '@emotion/is-prop-valid';

const StyledThing= styled('a', {
  shouldForwardProp: isPropValid,
})({/* ... */})

Context 🔦

I think that wanting to forward an invalid html attribute to the DOM is rare, and should be the exceptional case. This creates boilerplate of always needing to provide configuration to styled(). It is unexpected to people who use Emotion and are freshly joining MUI.

Your Environment 🌎

This issue is readily reproduced in codesandbox, so I doubt any further environment specification is necessary.

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.