Nth-потомок стилизованного компонента не работает - PullRequest
Новая
       57

Nth-потомок стилизованного компонента не работает

1 голос
/ 15 апреля 2020

Я создал ReactComp onet под названием FilterOptions. Что я собираюсь использовать следующим образом: 

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

Я просто хочу, чтобы первые «FilterOptions» имели красный фон.

Внутри FilterOptions у большинства внешних контейнеров есть & : 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). Не знаю, что здесь не так.

1 Ответ

0 голосов
/ 15 апреля 2020

Ваш стилизованный компонент называется контейнером, но ваши FilterOptions находятся внутри компонента с именем Filter. Так что, конечно, это не работает. Попробуйте это: 

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

Кстати, ваш синтаксис css &: nth-child (1) правильный

...