Дочерний компонент содержит таблицу материалов 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 предоставляет средства для создания сложных сеточных макетов, таких как магазины сеток.
Мы можем использовать ::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>