it-swarm.com.ru

Переопределение инкапсулированного CSS внешнего компонента

Мне было интересно, как переопределить инкапсулированный CSS внешнего компонента.

Поэтому я использую material2 в моем проекте, и компонент tabs имеет переполнение атрибута, установленное в tab-body. Можно ли переопределить значение переполнения?

7
Salma Hamed

Вы можете использовать специальную инструкцию css /deep/. Смотрите документацию

Итак, если у вас есть

app
  sub-component
    target-component
      <div class="target-class">...</div>

Вы можете вставить в свои приложения CSS (или меньше):

/deep/ .target-class {
  width: 20px;
  background: #ff0000;
}

Очевидно, вы также можете поместить этот фрагмент CSS в sub-component.

18
Meir

Просто проверьте класс, который применяется к вкладкам внешним компонентом (используйте Inspector или любой другой инструмент). В своем CSS-файле стиля добавьте то же имя класса для вкладок и задайте свойство overflow, а также добавив к нему! !, чтобы убедиться, что он перезаписывает предыдущий. Также убедитесь, что ваша ссылка CSS на страницу добавлена ​​после ссылки CSS внешнего компонента, если таковая имеется.

Надеюсь это поможет.

1
Nasir T

Из этой статьи

Хотя стиль компонента хорошо изолирован, его все же можно легко переопределить при необходимости. Для этого нам просто нужно добавить атрибут в тело страницы:

<body override>
    <app></app>
</body>

Имя атрибута может быть любым. Никакого значения не требуется, и переопределение имени делает очевидным, для чего оно используется. Чтобы переопределить стили компонента, мы можем сделать следующее:

[override] hello-world h1 {
    color:red;
}

Где override - это атрибут, hello-world - это целевой компонент, а h1 - это то, что вы пытаетесь перекомпилировать. (поймите это правильно или это не сработает).

Ваш компонент hello-world будет 

selector: 'hello-world',
styles: [`
   h1 {
      color: blue;
   }
`],
template: ` <h1>Hello world</h1> `

Я думаю, что это самый элегантный способ.


В качестве альтернативы, если вы собираете какую-то библиотеку, вы можете полностью сбросить стилизацию, выполнив что-то необычное в вашем css, например:

:Host-context(.custom-styles) { //.. css here will only apply when there is a css class custom-styles in any parent elem }

Итак, чтобы использовать ваш компонент, вы бы использовали 

<hello-world class="custom-styles">

Но это гораздо менее удобно, чем первый вариант.

0
Ced