Material-ui: React warning using styled function

[yordis]

• [x] This is not a v0.x issue.
• [x] 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. | |

[oliviertassinari]

The relevant discussion: https://github.com/styled-components/styled-components/issues/439.

[yordis]

@oliviertassinari I tried to follow the mega-thread,

What do we need to do to fix this? I am kind of lost with so much info.

[oliviertassinari]

@yordis To sum-up. The props are forwarded to the underlying wrapped element. You have to manually stop them.

[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?

[puema]

Any updates here? It is super annoying to have passed custom props to the underlying dom element. For more complex styling the styled API is then pretty unusable.

[oliviertassinari]

I had a new look at the issue. emotion and styled-components report a warning, shouldForwardProp is supported by both. You can use the API to ignore the prop.

For instance with styled-components:

import React from 'react';
import { experimentalStyled as styled } from '@material-ui/core/styles';

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

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

export default function Demo() {
  return <div><AppBarContent alignContent="end">hello</AppBarContent></div>
}

However, emotion doesn't support JavaScript prop functions as styled-components does. So the styledBy API isn't usable with emotion. cc @mnajdova for context

[meastes]

I wanted to give this a try, but unfortunately experiementalStyled doesn't seem to be available in @material-ui/core/styles - at least not in the TypeScript definitions. Is this something that should be available in the stable release version of MUI?

[oliviertassinari]

@meastes Make sure you use v5.0.0-alpha.13 or upward: https://codesandbox.io/s/unstyledslider-material-demo-forked-d98tg?file=/demo.tsx. It works.

[oliviertassinari]

Duplicate of #21318