Передать класс CSS в библиотеку Angular

Я создаю библиотеку, используя угловой CDK для пользовательского модального режима. Я хочу, чтобы приложение, которое использовало бы библиотеку, передало имя класса CSS с другой конфигурацией для модального окна. Чтобы я мог применить такой класс в библиотеке.

  this.overlayContainer.getContainerElement().classList.add(modalConfig.overlayContainerClass);

Я вижу, что класс применяется к элементу, но класс отсутствует.

<div class="cdk-overlay-container overlay-material-design-theme mat-typography custom">

Я определил это в файле CSS компонента приложения.

.custom{
  width: 100%;
}

Вопрос в том, как CSS, присутствующий в компоненте приложения, будет доступен для компонента библиотеки?


typescript angular css angular-cdk
person Chandresh Mishra    schedule 27.03.2020    source источник
comment
класс custom должен быть определен в файле, на который не распространяются правила инкапсуляции. Обычно это глобальный файл styles.scss в корневой папке. Или в импортированном туда файле, если вам нужна дополнительная структура.   -  person toskv    schedule 27.03.2020
comment
пожалуйста, также отметьте фактический ответ как правильный, чтобы другие люди легко знали, какое решение было.   -  person toskv    schedule 30.03.2020

Ответы (1)


arrow_upward
1
arrow_downward

Чтобы классы css работали таким образом, вы должны поместить их в место, где нет инкапсуляции представления.

Место для этого обычно находится в файле src/styles.scss.

Если вам нужна дополнительная структура, вы можете иметь их в другом файле scss, который src/styles.scss импортирует.

person toskv    schedule 27.03.2020