在 React 中使用 Emotion 进行样式设置会在执行服务器端渲染错误时给出 ":nth-child" 可能是不安全的

Posted 2023-02-19

【中文标题】在 React 中使用 Emotion 进行样式设置会在执行服务器端渲染错误时给出 ":nth-child" 可能是不安全的

【英文标题】：Styling with Emotion in React gives ":nth-child" is potentially unsafe when doing server-side rendering error

【发布时间】：2020-12-08 17:36:00

【问题描述】：

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

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

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

伪类":nth-child" 在进行服务器端渲染时可能不安全。尝试将其更改为":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 和 this GitHub issue 已经没有给我一个明确的解释。

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

【参考方案1】：

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

EmotionJS GitHub Issue