Специфичные для платформы стили не наследуются от стиля компонента

Question

У меня проблемы со стилями, когда в игру вступают CSS-файлы для конкретной платформы.

Смотрите файлы ниже:

items.component.ts:

@Component({
  selector: 'ns-items',
  moduleId: module.id,
  template: `
      <Label [nsRouterLink]="['/item', item.id]" [text]="item.name"
             class="list-group-item"></Label>
  `,

  styleUrls: ['./items.component.css' ]
})
export class ItemsComponent implements OnInit {
  items: Item[];

  constructor(private itemService: ItemService) {
  }

  ngOnInit(): void {
    this.items = this.itemService.getItems();
  }
}

items.component.css:

Label {
    background-color: blue;
}

items.component.ios.css:

Label {
    background-color: red;
}

items.component.android.css пуст.

На iOS это ведет себя как ожидалось, Labelцвет фона красный. На Android LabelЦвет фона не изменился. Я ожидаю, что поведение наследует стили от items.component.css, Итак LabelЦвет фона должен быть синим, а это не так.

Я пытался добавить @import items.component.css в items.component.android.css но потом я получаю Maximum call stack size exceeded ошибка, потому что я объявляю CSS уже в компоненте.

Как правильно использовать компонент-глобальный CSS, а затем платформо-специфичные, которые наследуются от компонент-глобального? Или я что-то делаю не так?

Answer 1

Что должен означать компонент-глобальный? С ViewEncapsulation.Emulated (настройка по умолчанию) и.Native (браузер является родным способом сделать то же самое, что и эмулируется, но только немногие браузеры реализовали его; не использовать вообще!) Стили из вашего компонента применяются только к компоненту.

Ну, если вы не используете :host ::ng-deep селекторы в вашем CSS, и в этом случае они также применяются к базовым дочерним компонентам. Но это не рекомендуется, потому что однажды эта функция будет устаревшей в Chrome, поэтому вместо этого вы должны использовать @Input() для передачи стилей / конфигураций базовым компонентам, если вам действительно это нужно.

Если вам нужны глобальные стили, вы можете объявить их в глобальной папке assets и включить их в angular-cli.json в качестве ресурсов.

Или вы можете установить ViewEncapsulation.None для одного конкретного компонента, стили которого будут проникать в остальную часть приложения. Я не рекомендую этот подход, так как это сбивает с толку, откуда берутся примененные глобальные стили, даже если вы делаете это в компоненте ядра, ответственном за тематику. Библиотека Google Angular-Material также не использует ViewEncapsulation.None.

TLDR: используйте только angular-cli.json для встраивания глобальных css-файлов.