Warning: "Prop `className` did not match"
jdevries3133 opened this issue · 1 comments
Hello,
It seems like when a variable name is not unique, a className
did not match warning is generated, and the style is not ultimately applied in the browser because of the mismatch.
Here is a minimal example of what I am experiencing:
Non-unique name "A
" causes the error and not-applied styles.
import styled from "styled-components";
const A = styled.a`
color: aquamarine;
text-decoration: wavy underline lime;
`;
/* causes warning, style is not applied on frontend */
export const MyLink = () => <A>Hello, world!</A>;
If I change the variable name like this, the issue goes away and everything behaves as expected.
import styled from "styled-components";
const UniquelyNamedA = styled.a`
color: aquamarine;
text-decoration: wavy underline lime;
`;
/* causes warning, style is not applied on frontend */
export const MyLink = () => <UniquelyNamedA>Hello, world!</UniquelyNamedA>;
For additional information, this is the error in the console:
Thanks in advance and let me know if I can provide any additional information!
This error happens 99% of the time because either ssr
is not enabled in the babel plugin options and/or there is some other confounding factor like an if
statement or ternary in the styling that switches props based on client vs server.