Блог

Я хотел поместить границу только поверх второго и третьего выпадающего списка. Я все еще не могу этого достичь. кликните сюда

 const Select = styled.select`
  width: 100%;
  min-width: 0px;
  outline: 2px solid transparent;
  outline-offset: 2px;
  position: relative;
  appearance: none;
  background: inherit;
  padding-inline-start: 3rem;
  padding-inline-end: 2rem;
  height: 3.2rem;
  amp;:nth-child(1),
  :nth-child(3) {
    border: none;
  }
  border: 1px solid;
  border-left: none;
  border-right: none;
  border-color: #cecece;
`;
 

Основная проблема в том, что вы используете nth-child(1) so, он будет применяться к выбранным дочерним элементам, но не к самому выбору.

Рекомендуемый модификатор в этом случае будет применяться непосредственно к элементу, в этом случае я бы сказал nth-of-type .

 amp;:nth-of-type(1) {
  background: red;
}
 

Но главная проблема с этим заключается в том, что ВСЕ элементы должны быть на одном уровне, или запрос должен быть частью дедушки и бабушки.

Итак, в вашем коде будет работать таким образом:

 const Item = styled.div`
  margin: 0.2rem 0;

  amp;:nth-of-type(2) select,
  amp;:nth-of-type(3) select {
    background: blue;
  }
`;
 

Кроме того, пользуясь styled-components . Я включил реквизит индекса. И используйте, чтобы включить границу или нет в вашем стиле. Это похоже на:

 const Select = styled.select`
  width: 100%;
  min-width: 0px;
  outline: 2px solid transparent;
  outline-offset: 2px;
  position: relative;
  appearance: none;
  background: inherit;
  padding-inline-start: 3rem;
  padding-inline-end: 2rem;
  height: 3.2rem;
  border: ${props => props.index amp;amp; [1, 2].includes(props.index) ? '1px solid #cecece' : 'none'};
  border-left: none;
  border-right: none;
  border-bottom: none;
`;
 

Я разветвил вашу кодовую строку, здесь у вас работают оба подхода:

• С индексом
• рекомендуется использовать с запросом бабушки и дедушки (этот подход использует фон)

https://codesandbox.io/s/dropdown-styled-components-forked-vpo6k?file=/src/index.js:285-366