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

编程问答 2022-08-16

问题描述

将Emotion用于 React 项目，我使用div将特定的padding-bottom元素设置为以下样式：

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

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

伪类":nth-child"在进行服务器端渲染时可能不安全。尝试将其更改为":nth-of-type"。

从控制台查看屏幕截图：

error-screenshot

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

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和this GitHub issue，这些都没有给我清楚的解释。

问题是，如果消息显示的是客户端而不是服务器端，为什么会显示错误消息？谢谢！

解决方法

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

EmotionJS GitHub Issue

emotionreactjsreactjsstorybook