Обновите стили, установленные в Shadow Dom, с помощью CSS - PullRequest
Новая
       44

Обновите стили, установленные в Shadow Dom, с помощью CSS

0 голосов
/ 24 октября 2018

Этот вопрос относится к Ionic, но его ответ может относиться более широко к CSS.Я не уверен.

Я использую ionic 4, который создает теневые элементы DOM, которые имеют определенные стили.У меня есть следующее: 

<ion-item>
  <ion-label position="floating">Floating Label</ion-label>
  <ion-input></ion-input>
</ion-item>

Я хочу, чтобы текст «Плавающая метка» перемещался влево дальше, чем обычно, когда он плавающий.Я могу сделать это довольно легко с помощью стилей на самом ярлыке.

Однако у теневых DOM-дивов, созданных в ion-item, есть свои собственные стили, которые включают overflow: hidden.Я не нашел способа обновить эти стили из моей таблицы стилей.Я пытался использовать /deep/ и различные другие селекторы, но они, кажется, не работают, и поддержка их также, кажется, удалена.Я понимаю, что вы можете использовать переменные CSS, но это конкретное свойство overflow не устанавливается переменной.Я также понимаю, что вы можете использовать DOM для внедрения стилей в теневой DOM, но я хочу избежать этого, поскольку мне придется делать это где-то в каждом компоненте, а не делать это один раз в приложении.

Есть ли способ переопределить стили, установленные в теневом DOM, используя CSS, если переменные недоступны?

1 Ответ

0 голосов
/ 24 октября 2018

Вы должны попробовать использовать селектор ng-deep для непосредственного управления стилем элементов DOM. 

::ng-deep {
 .your-class { // Used to contain your deep change to a localized node
    your style
}

Угловые ориентиры: https://angular.io/guide/component-styles

...