Css 在“React gives”中用情感塑造造型：“第N个孩子”；在执行服务器端渲染错误时可能不安全

用于React项目我正在使用

填充底部的
设置特定
div
元素的样式，如下所示：

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

并在Chrome的控制台中获取以下错误消息：

在执行服务器端渲染时，伪类“
”：nth child“
可能不安全。尝试将其更改为“
类型的第n个“

”

请参见控制台中的屏幕截图：

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

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

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

请参阅package.json中的依赖项：

问题：

因此，错误消息的建议更改解决了问题。也检查过了，已经没有给我一个明确的解释了

---

问题是，为什么该错误消息会显示事件是否发生在客户端，而不是消息所述的服务器端？谢谢大家!

当SSR渲染组件时，它还会同时渲染样式元素。组件的第一个子元素可能是样式元素，使用

n-th-child

可能不安全，因为这可能是意外行为

---

当SSR渲染组件时，它还会同时渲染样式元素。组件的第一个子元素可能是样式元素，使用

n-th-child

可能不安全，因为这可能是意外行为