当我使用 :first-child in Emotion 时如何解决此错误答案

【问题标题】：How to fix this error when i using :first-child in emotion当我使用 :first-child in Emotion 时如何解决此错误
【发布时间】：2021-12-22 17:50:02
【问题描述】：

我在react 中使用Emotion。

我的元素：

<div class="parent">
    <span class="one">1</span>
    <div class="two">2</div>
    <span class="three">3</span>
    <div class="four">4</div>
</div>

.parent {
    & > *:not(:first-child) {
        color: red;
    }
}

来自Emotion的错误：

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

但是，很明显，即使将 :first-child 替换为 :first-of-type 也不会达到我想要的结果

【问题讨论】：

标签： reactjs typescript emotion

【解决方案1】：

您是否考虑将所有span 更改为div 或反之亦然？

顾名思义，:first-of-type 只搜索具有相同类型的元素。既然你在混合div 和span，显然它不会起作用。

顺便说一句，除非您正在执行 SSR（例如使用 Next 或 Gatsby），否则您可以放心地忽略该警告。

【讨论】：