Как загрузить угловой материал CSS

Question

У меня есть базовая навигация и два компонента.

Component1 использует таблицу MatTable, но Component2 чистый HTML с классами css материала:

<table class="mat-table mat-elevation-z8">
  <tbody>
    <tr class="mat-row">
      <td class="mat-cell">

Когда я перехожу к Component1, а затем к Component2 всеэто мило.Однако, когда я сначала перехожу к Компоненту 2, некоторые элементы стиля материала отсутствуют, например, строки таблицы.

Как правильно использовать материал CSS в углах без использования компонентов материала

Answer 1

Как правильно использовать материал CSS в углах без использования компонентов материала

Краткий ответ: вы не можете этого сделать.Для более подробного объяснения см. Использование классов Angular Material вне страниц Angular .

Чтобы повторить пункты этого поста, главное, что вам нужно понять, это то, что <table mat-table> - это AngularКомпонент, тогда как <table class="mat-table"> это просто <table> с классом.При использовании компонента вы получаете весь инкапсулированный стиль, который принадлежит только компоненту, а не только стиль, определенный в глобальной таблице стилей для класса "mat-table".Конечно, как указано в ссылке, стиль - это стиль, а css - это просто css, поэтому использование классов материалов сделает что-то, но не все, что вы, вероятно, захотите.

Answer 2

Лучший способ импортировать материальную тему в ваше приложение, по моему мнению, это добавить в ваш (src / styles.scss, учитывая, что вы используете препроцессор SCSS):

// material theming
@import '../node_modules/@angular/material/theming';
@include mat-core();
@import 'my-theme';

// create the default theme
@include angular-material-theme($my-theme);

, затем добавьте свой собственныйтема (my-theme.scss):

$my-primary: mat-palette($mat-blue_gray, 800);
$my-accent: mat-palette($mat-green, 400);
$my-warn: mat-palette($mat-red);

$my-theme: mat-light-theme($my-primary, $my-accent, $my-warn);