Current behavior:
A console log shows up due using any Emotion styles containing :nth-child or :first-child pseudo-classes
The pseudo class ":nth-child" is potentially unsafe when doing
server-side rendering. Try changing it to ":nth-of-type".
To reproduce:
These warnings are false positives for CSR-only applications since hydration mismatches cannot occur without SSR.
- Create a React app with
@emotion/react that is client-side rendered only (no SSR setup)
- Use any Emotion styles containing
:nth-child or :first-child pseudo-classes
- Run in development mode
- Observe SSR warnings in console despite not using SSR
Example code:
import { css } from '@emotion/react';
const styles = css`
tr:first-child {
font-weight: bold;
}
td:nth-child(2) {
color: blue;
}
`;
function MyComponent() {
return (
<table css={styles}>
<tr><td>Cell 1</td><td>Cell 2</td></tr>
</table>
);
}
**Expected behavior:**
No warning console log like:
The pseudo class ":nth-child" is potentially unsafe when doing
server-side rendering. Try changing it to ":nth-of-type".
**Environment information:**
* react version: 19.2.3
* @emotion/react version: 11.14.0
* @emotion/cache version: 11.14.0
* @emotion/styled version: 11.14.1
Current behavior:
A console log shows up due using any Emotion styles containing
:nth-childor:first-childpseudo-classesTo reproduce:
These warnings are false positives for CSR-only applications since hydration mismatches cannot occur without SSR.
@emotion/reactthat is client-side rendered only (no SSR setup):nth-childor:first-childpseudo-classesExample code:
The pseudo class ":nth-child" is potentially unsafe when doing
server-side rendering. Try changing it to ":nth-of-type".