Блог

В проекте, над которым я работаю, мы используем модули css с postcss (также postcss-cssnext и postcss-include ). У нас также есть bootstrap как зависимость, которая предоставляется глобально.

В данном компоненте у меня есть пользовательский класс для кнопки. Итак, моя кнопка имеет следующие классы: btn btn-custom .

В соответствии с требованиями я хочу изменить внешний вид кнопки, когда она находится в активном состоянии. Для этого в bootstrap есть следующий селектор: .btn.active, .btn:active . Перезапись псевдокласса — это простая часть. Однако .active класс — это то, где он становится сложным.

В моем css-файле я попробовал несколько способов справиться с этим, но, похоже, ни один из них не работает. Вот некоторые из вещей, которые я пробовал:

 .btn-custom {
  amp;.active, amp;:active {}
  @nested :global amp;.active, amp;:active {}
  @nested :global amp; { amp;.active, amp;:active: {} }
  @nested :global { amp;.active, amp;:active: {} }
}

:global {
  .btn-custom { amp;.active, amp;:active {} }
  .btn { amp;.active, amp;:active {} }
}
 

Есть ли у кого-нибудь идеи о том, как этого можно достичь?

Глобальные целевые классы должны быть заключены в скобки, например:

 .btn-custom {
  color: red;
}

.btn-custom:global(.active) {
  color: blue;
}
 

Итак, с вложенностью:

 .btn-custom {
  amp;:global(.active), 
  amp;:active {}
}
 

Этот последний не проверялся, я думаю, здесь важен порядок плагинов PostCSS.