Warning: "Prop className did not match"

[jdevries3133]

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!

[quantizor]

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.