Within the Child component, an Angular material table is created with columns passed as input:
<table mat-table>
<ng-container *ngFor="let col of columns" [matColumnDef]="col">
</table>
@Input() columns: string[]
The Parent component provides column definitions, but adjusting specific aspects like mat table column width can only be done by setting styles in a stylesheet:
.mat-column-col-name {
width: 10px
}
How can I modify the mat-column width from the parent component? Column names are known by the parent and can be defined in its stylesheet. Avoiding encapsulation: none is crucial since the child component is within a library under development. Passing styles through @Input() would be the ideal solution.
Edit: Material themes are also being used, preventing external styles from applying. Changing library interfaces is something I'd prefer to avoid if possible:
// 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);
Thus:
.wrapper {
.my-table-component {
border: 5px solid red; // applied easily even without !important
.mat-column-type {
width: 99em !important; // never applied