Применить стили .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-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
0
0
56
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

Спасибо, я рассмотрел эти 2 варианта без инкапсуляции, но проблема в том, что я использую материальные темы для дочерних элементов, поэтому не могу заставить их работать. Можно ли использовать решение с глобальными стилями, сохраняя при этом реализацию материальной темы? Я отредактировал комментарий, чтобы показать темы.

JoshThunar 24.05.2024 12:05

@JoshThunar, вы можете переопределить его, используя !important, или использовать специфичность, например, добавить атрибуты классов или селектор, чтобы повысить приоритет CSS и, наконец, применить стиль!

Naren Murali 24.05.2024 12:10

Спасибо, однако это решение позволяет редактировать только мои собственные стили, а не .mat-column-type. Я могу легко добавить стили к f.e. .my-table, но доступ к этим внутренним классам материала с этого уровня невозможен, даже с !important. Это просто не имеет никакого эффекта.

JoshThunar 24.05.2024 12:22

@JoshThunar, пожалуйста, поделитесь рабочим примером на stackblitz, потому что вам сложно помочь :ng-deep .wrapper-class .mat-column-col-name { width:100% !important } это должно работать, нужен рабочий пример для отладки!

Naren Murali 24.05.2024 12:25

Спасибо, размещение моей библиотеки в stackblitz заняло много времени, но позволило мне выявить проблему: stackoverflow.com/questions/74259086/… Я сосредоточился на потенциальных проблемах с темами, а речь шла о конкретном поведении ширина столбца матовой таблицы. Это работает с max-width !important

JoshThunar 26.05.2024 00:32

Другие вопросы по теме