Как использовать совместные селекторы в styleled-компоненте

Question

У меня есть устаревший CSS, который выглядит следующим образом:

.btn_1 {
    color: #fff;
    background: #004dda;
    display: inline-block;
}
.btn_1:hover {
  background-color: #FFC107;
  color: #222 !important;
}
.btn_1.full-width {
  display: block;
  width: 100%;
}

Я хочу перейти на использование стилевых компонентов (стиль CSS-in-JS) в React.

Это мойМиграция до сих пор:

.btn_1 {
    color: #fff;
    background: #004dda;
    display: inline-block;
    :hover {
        background-color: #FFC107;
        color: #222 !important;
    }
}

но есть ли какое-либо решение в styleled-компонентах для селекторов, таких как .btn_1.full-width, или мне просто нужно создать еще один блок CSS для этого?

---

Я думаюбыло бы здорово сделать что-то вроде этого (или лучше):

.btn_1 {
    ${this}.full-width {
        display: block;
        width: 100%;
   }
}

, но я не могу найти решение в документах.Ты хоть представляешь, как это возможно, или это даже хорошая идея?

Answer 1

из официальная документация по стилевым компонентам

Для сложных шаблонов селектора можно использовать амперсанд (&) для обращения к основному компоненту.Вот еще несколько примеров его потенциального использования:

const Thing = styled.div.attrs({ tabIndex: 0 })`
  color: blue;

  &:hover {
    color: red; // <Thing> when hovered
  }

  & ~ & {
    background: tomato; // <Thing> as a sibling of <Thing>, but maybe not directly next to it
  }

  & + & {
    background: lime; // <Thing> next to <Thing>
  }

  &.something {
    background: orange; // <Thing> tagged with an additional CSS class ".something"
  }

  .something-else & {
    border: 1px solid; // <Thing> inside another element labeled ".something-else"
  }
`

Answer 2

Вы можете использовать амперсанд для цепочки вложенных селекторов.

.btn_1 {
    &.full-width {
        display: block;
        width: 100%;
   }
}