Ссылка на имена глобальных классов из модуля css
Представьте себе более традиционное веб-приложение, которое медленно вводит компонент React на одной странице, достаточно сложный, чтобы в нем нуждаться.
Мы разрабатываем этот новый пользовательский интерфейс с помощью Webpack, и мы используем модули CSS для всех новых CSS, которые необходимы новому пользовательскому интерфейсу. Но нам все еще нужно повторно использовать некоторые глобальные CSS, которые предоставляются в приложении через традиционную таблицу стилей CSS, связанную в html.
Поэтому нам нужно в наших модулях css иногда писать правила, которые относятся к классу css в глобальном пространстве имен, а не к классу, который локально привязан к нему и, следовательно, преобразуется в более похожее на драгоценный камень длинное имя класса css при запуске приложения:
.container {
// rules for container
}
.container.pull-right {
// rules for when the container element also has the pull-right class
}
В приведенном выше примере container должен быть классом css, который модуль css будет контекстуализировать для конкретного компонента, использующего этот модуль.
Но pull-right - это класс, который существует в файле css, доступном на странице, но не обрабатывается модулями css или Webpack. Следовательно, нам нужен способ (возможно, синтаксис), чтобы сообщить модулям css: «Эй, оставьте pull-right в том виде, как он есть в вашем выводе. Не связывайтесь с ним и не пытайтесь БЭМ из него дерьмо».
Я предполагаю, что что-то подобное должно существовать, но я пока не смог найти его в Google.
Ответы 1
Чтобы ссылаться на глобально объявленное имя класса внутри модулей css с областью действия :local, вы должны использовать переключатель :global:
.container {
// rules for container
}
.container:global(.pull-right) {
// rules for when the container element also has the pull-right class
}
Подробнее объяснение в документации css-модулей.