специфичные для платформы стили не наследуются от стиля компонента - PullRequest
Новая
       5

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

0 голосов
/ 29 апреля 2018

У меня проблемы со стилями, когда в игру вступают 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, а затем платформо-специфичные, которые наследуются от компонентно-глобального? Или я что-то не так делаю?

1 Ответ

0 голосов
/ 29 апреля 2018

Что означает компонент-глобал? С 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-файлов.

...