Search code examples
cssreactjsstorybookemotion

Styling with Emotion in React gives ":nth-child" is potentially unsafe when doing server-side rendering error

Using Emotion for a React project I'm styling a particular div element with padding-bottom as the following:

export const StyledItem = styled('div')(() => ({
  '&:nth-child(1) > div:nth-child(1)': {
    paddingBottom: '1px'
  }
}))

And getting the following error message in Chrome's console:

The pseudo class ":nth-child" is potentially unsafe when doing server-side rendering. Try changing it to ":nth-of-type".

See the screenshot from the console:

error-screenshot

The following change resolves the issue and removes the error message from the console:

export const StyledItem = styled('div')(() => ({
  '&:nth-of-type(1) > div:nth-of-type(1)': {
    paddingBottom: '1px'
  }
}))

See the dependencies from package.json:

"dependencies": {
   "@emotion/core": "^10.0.28",
   "@emotion/styled": "^10.0.27",
   "react": "^16.13.1",
   "@storybook/react": "^5.3.13",
   /* other dependencies */
}

Question:

So the suggested change for the error message resolved the issue. Also checked this question and this GitHub issue already which are not giving me a clear explanation.

The question is why is that error message has shown if the things are happening on client side and not on server side as the message states? Thank you!

Solution

  • When SSR renders the components, it also renders style elements along with it. The first child of the component may be a style element and using n-th-child could potentially be unsafe as it would be unintended behaviour.

    EmotionJS GitHub Issue