Применить стили .mat-column-name к дочернему компоненту в Angular Material

Дочерний компонент содержит таблицу материалов Angular, созданную на основе столбцов, переданных в качестве входных данных:

<table mat-table>
  <ng-container *ngFor = "let col of columns" [matColumnDef] = "col">
</table>

@Input() columns: string[]

Родительский компонент предоставляет определения столбцов. Однако единственный способ повлиять на ф.е. mat table column width — это установка таблицы стилей с помощью

.mat-column-col-name {
  width: 10px
}

Как я могу установить mat-column width из родительского компонента? Имена столбцов известны родителю и могут быть определены в его таблице стилей. Я настоятельно хочу избегать любых encapsulation: none, потому что дочерний компонент находится внутри библиотеки, которую я разрабатываю. Передача стилей как @Input() будет лучшим решением.

Обновлено: я также использую темы материалов, которые предотвращают применение стилей вне библиотеки, я бы хотел не менять интерфейсы lib, если это возможно:

// Library
$theme: map.merge(
  primary: mat.define-palette($my-palette-grey),
  secondary: mat.define-palette($my-palette-blue)
);

// Child in lib
@mixin theme($theme) {
 .my-table-component {

// Parent global css
@use '@my-lib/src/theme' as theme;
@use '@my-lib/table/src/theme/table-component' as table;
@include table.theme($theme);

Поэтому:

.wrapper {
  .my-table-component {
    border: 5px solid red; // easily applied, even without !important
    .mat-column-type {
      width: 99em !important; // Never applied

🤔 А знаете ли вы, что...
CSS Grid Layout предоставляет средства для создания сложных сеточных макетов, таких как магазины сеток.


56
1

Ответ:

Решено

Мы можем использовать ::ng-deep, чтобы сделать стили видимыми от родителя до дочерним элементам, вот так:

:: ng-deep .mat-column-col-name {
  width: 10px
}

Если вы не являетесь поклонником ::ng-deep, я бы предложил добавить класс к родительскому элементу, который обертывает дочерний элемент .wrapper-class, затем перейти к файлу глобальных стилей angular либо styles.scss, либо global-styles.scss и применить стили, это ограничит стили только этим class и его дочерние элементы, файл будет расположен в папке src!

.wrapper-class .mat-column-col-name {
  width: 10px
}

родитель:

<div class = "wrapper-class">
    <child-component/>
</div>