New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.
Already on GitHub? Sign in to your account
React warning using styled function #15614
Comments
The relevant discussion: styled-components/styled-components#439. |
@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. |
@yordis To sum-up. The props are forwarded to the underlying wrapped element. You have to manually stop them. |
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 It is as simple as, don't pass props to styled html elements? |
Any updates here? It is super annoying to have passed custom props to the underlying dom element. For more complex styling the |
I had a new look at the issue. emotion and styled-components report a warning, 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 |
I wanted to give this a try, but unfortunately |
@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. |
Duplicate of #21318 |
|
See #27512 (comment) |
Expected Behavior 馃
Using the following code snippet
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 lowercasealigncontent
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
yarn start
Context 馃敠
Your Environment 馃寧
The text was updated successfully, but these errors were encountered: