Ссылка на глобальные имена классов из модуля css - PullRequest
Новая
       14

Ссылка на глобальные имена классов из модуля css

0 голосов
/ 14 сентября 2018

Представьте себе более традиционное веб-приложение, которое медленно внедряет компонент 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 как есть в вашем выводе. Не связывайтесь с ним и не пытайтесь BEM S ** t из него».

Я полагаю, что нечто подобное должно существовать, но я так и не смог найти его, пока гуглял вокруг.

1 Ответ

0 голосов
/ 06 августа 2019

Чтобы обратиться к глобально объявленному имени класса внутри :local модулей CSS с областью действия, вы должны использовать :global switch: 

  .container {
    // rules for container
  }

  .container:global(.pull-right) {
    // rules for when the container element also has the pull-right class
  }

Более подробное объяснение в документации по css-модулям.

...