Дочерний компонент содержит таблицу материалов 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






Мы можем использовать ::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>
@JoshThunar, вы можете переопределить его, используя !important, или использовать специфичность, например, добавить атрибуты классов или селектор, чтобы повысить приоритет CSS и, наконец, применить стиль!
Спасибо, однако это решение позволяет редактировать только мои собственные стили, а не .mat-column-type. Я могу легко добавить стили к f.e. .my-table, но доступ к этим внутренним классам материала с этого уровня невозможен, даже с !important. Это просто не имеет никакого эффекта.
@JoshThunar, пожалуйста, поделитесь рабочим примером на stackblitz, потому что вам сложно помочь :ng-deep .wrapper-class .mat-column-col-name { width:100% !important } это должно работать, нужен рабочий пример для отладки!
Спасибо, размещение моей библиотеки в stackblitz заняло много времени, но позволило мне выявить проблему: stackoverflow.com/questions/74259086/… Я сосредоточился на потенциальных проблемах с темами, а речь шла о конкретном поведении ширина столбца матовой таблицы. Это работает с max-width !important
Спасибо, я рассмотрел эти 2 варианта без инкапсуляции, но проблема в том, что я использую материальные темы для дочерних элементов, поэтому не могу заставить их работать. Можно ли использовать решение с глобальными стилями, сохраняя при этом реализацию материальной темы? Я отредактировал комментарий, чтобы показать темы.