React warning using styled function

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

Using the following code snippet

export const styledBy = (property, mapping) => props =>
  mapping[props[property]];

const AppBarContent = styled('div')({
  flexGrow: 1,
  display: 'flex',
  justifyContent: styledBy('alignContent', {
    start: 'flex-start',
    end: 'flex-end',
    center: 'center',
  }),
});


// ....

<AppBarContent alignContent={props.alignContent}>
  {props.children}
</AppBarContent>

Current Behavior 😯

index.js:1437 Warning: React does not recognize the alignContent prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase aligncontent instead. If you accidentally passed it from a parent component, remove it from the DOM element.

Steps to Reproduce 🕹

Link: https://github.com/straw-hat-team/react-admin

1. yarn start
2. Notice the console error

Context 🔦

Your Environment 🌎

Tech	Version
Material-UI	4.0.0-beta.1
React	16.8.6
Browser
TypeScript	3.4.5
etc.

[ggascoigne]

I think that I’m missing something; is there any way to stop forwarding props to an html element (such as div), while still using styled(). I can see how to do it with makeStyles/useStyles since you get explicit control of what gets passed to your div, but not when using styled.

It is as simple as, don’t pass props to styled html elements?

[Puspendert]

import styled from "styled-components" doesn’t have this problem, but import {styled} from "@mui/material" still giving this warning. Any official solution?