样式化组件的 Nth-child 不起作用答案

【问题标题】：Nth-child of styled component not working样式化组件的 Nth-child 不起作用
【发布时间】：2020-07-28 11:47:52
【问题描述】：

我创建了一个名为 FilterOptions 的 ReactComponet。我将像这样使用它：

<Filter>
   <FilterOptions> example1 </FilterOptions>
   <FilterOptions> example2 </FilterOptions>
   <FilterOptions> example3 </FilterOptions>
<Filter>

我只希望第一个“FilterOptions”有红色背景。

在 FilterOptions 内部，最外面的 Container 有一个 &:nth-child(1) 我正在尝试使用，但由于某种原因不起作用？：

export const Container = styled.div
   background: ${({theme}) => theme.COLORS.HIGHLIGHT};
   padding: 8px 14px;
   margin-top: 15px;
   border-radius: 18px;
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
   &:nth-child(1) {
      background: red;
      height: 200px;
      width: 300px;
      margin: 200px;
   };
;

我已经尝试了很多组合，例如 &:nth-child(1)、:nth-child(1)、::nth-child(1)、&&:nth-child(1)。不知道这里出了什么问题。

【问题讨论】：

标签： reactjs pseudo-element styled-components pseudo-class

【解决方案1】：

您的样式化组件名为 Container，但您的 FilterOptions 位于名为 Filter 的组件内。所以当然行不通。试试这个：

<Container>
   <FilterOptions> example1 </FilterOptions>
   <FilterOptions> example2 </FilterOptions>
   <FilterOptions> example3 </FilterOptions>
<Container>

顺便说一句，你的 css 语法 &:nth-child(1) 是正确的

【讨论】：

我想我对 nth-child 的使用感到困惑，然后，据我所知，nth-child(1) 会检查样式组件 ITSELF 是否是 nth-child(1)，并且不检查它的孩子

【解决方案2】：

只是对 HermitCrab 回答的内容稍作改动，我的 styled-component 应该是这样的：

<Filter>
   <Container> example1 </FilterOptions>
   <Container> example2 </FilterOptions>
   <Container> example3 </FilterOptions>
<Filter>

因为 &:nth-child(1) 会检查组件本身是否是第一个孩子（在本例中为容器）

【讨论】：