在 React 中使用 Emotion 设置样式会导致“：nth-​​child”在执行服务器端渲染错误时可能不安全

Question

将 Emotion 用于 React 项目我正在使用 padding-bottom 对特定 div 元素进行样式设置，如下所示：

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

并在 Chrome 的控制台中收到以下错误消息：

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

查看控制台的屏幕截图：

以下更改解决了问题并从控制台中删除了错误消息：

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

查看来自 package.json 的依赖项：

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

问题：

因此针对错误消息的建议更改解决了问题。还检查了 this question and this GitHub issue 已经没有给我一个明确的解释。

问题是如果事情发生在客户端而不是服务器端，为什么会显示错误消息消息状态？谢谢！

Answer 1

SSR 在渲染组件时，也会随之渲染样式元素。组件的第一个子元素可能是样式元素，使用 n-th-child 可能是不安全的，因为它是意外行为。

EmotionJS GitHub Issue