Как использовать совместные селекторы в styled-component
У меня есть устаревший 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;
}
}
но есть ли решение в styled-components для таких селекторов, как .btn_1.full-width, или я должен просто создать для этого еще один блок CSS?
Я думаю, было бы здорово сделать что-то вроде этого (или лучше):
.btn_1 {
${this}.full-width {
display: block;
width: 100%;
}
}
но я не могу найти решение в документах. У вас есть идеи, как это возможно, или это даже хорошая идея?
Пробовали ли вы использовать амперсанд &, это обычный способ для большинства препроцессоров CSS.
@Mulli Спасибо, но я ищу решение styled-components. Я четко знаю, как это сделать в css3.
@GingerCSSWizard Чувак, &.full-width сработало просто отлично! Интересно, почему никто не говорит об этом в документации styled-components. Не могли бы вы написать ответ для будущих посетителей?
Ответы 2
Вы можете использовать амперсанд для объединения вложенных селекторов.
.btn_1 {
&.full-width {
display: block;
width: 100%;
}
}
от официальная документация по стилизованным компонентам
Для сложных шаблонов селектора можно использовать амперсанд (&) для возврата к основному компоненту. Вот еще несколько примеров его потенциального использования:
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"
}
`
@Mehrad77 Верно! :-)
Для селекторов соединение перейдите по этой ссылке stackoverflow.com/questions/3772290/…. Обратите внимание, что нет необходимости ${this}