У меня есть родительский компонент, класс которого задается с помощью директивы (я даю мне тему, основанную на вводе пользователя).

В стиле дочернего компонента SCSS не работают даже простейшие правила, относящиеся к родительскому классу. Я читал о прокалывании теней и установил ViewEncapsulation в None в родительском компоненте, но не смог заставить его работать, так как уверен, что чего-то не хватает, о чем я не знаю.

< Сильный > app.component

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {

}

app.component.html

<div appTheme> <---- This one generates: class="theme-snow-cherry" (for example)
  <router-outlet></router-outlet>
</div>

tape.component.scss (дочерний компонент)

.theme-snow-cherry div {
  background-color: red;
}

enter image description here

Примечание. Если я добавлю вышеупомянутый стиль в свой app.component.css, это даст мне результат, но, очевидно, это не то место, где я хочу разместить стиль.

1
mok 26 Фев 2018 в 05:11

1 ответ

Лучший ответ

Поскольку вы определяете стиль в дочернем компоненте, вы должны установить инкапсуляцию на ViewEncapsulation.None в этом компоненте:

@Component({
  ...
  encapsulation: ViewEncapsulation.None
})
export class RibbonComponent {
  ...
}

В противном случае сгенерированный стиль класса имеет атрибут, специфичный для дочернего компонента, который предотвращает совпадение селектора .theme-snow-cherry с элементом div в родительском компоненте:

.theme-snow-cherry[_ngcontent-c2] div[_ngcontent-c2] {
  background-color: red;
}
2
ConnorsFan 26 Фев 2018 в 06:32