样式组件的 Nth-child 不工作

Question

我创建了一个名为 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)。不知道这里有什么问题。

Answer 1

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

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

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

Answer 2

只需对 HermitCrab 的回答稍作改动，我的样式组件就可以正常工作：

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

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

样式组件的 Nth-child 不工作

Nth-child of styled component not working

pseudo-class

pseudo-element

reactjs

styled-components