It is evident from the example at https://material.angular.io/components/expansion/examples that material components can be customized using the CSS of the component embedding them:
.example-headers-align .mat-form-field + .mat-form-field {
margin-left: 8px;
}
However, when attempting to add a right margin to 'my-own-component' with:
.example-headers-align .my-own-component {
margin-right: 8px;
}
No change in styling is observed. Is something incorrect in the above code?
An instance illustrating the issue includes:
Content of included component my-own-component.component.html:
<mat-chip-list>
<mat-chip color="primary" selected>Running</mat-chip>
</mat-chip-list>
Content of parent component my-panel.component.html:
<mat-expansion-panel class="example-headers-align">
<mat-expansion-panel-header>
<mat-panel-title><strong>System 123</strong></mat-panel-title>
<mat-panel-description>
22 queues, 2 nodes
</mat-panel-description>
<my-own-component></my-own-component>
</mat-expansion-panel-header>
More details here ...
</mat-expansion-panel>
... along with the style modifications for the parent component in my-panel.component.css:
.example-headers-align .mat-expansion-panel-header-title,
.example-headers-align .mat-expansion-panel-header-description {
flex-basis: 0;
align-items: center;
}
.example-headers-align .mat-expansion-panel-header-description {
justify-content: space-between;
}
.example-headers-align {
margin: 1rem;
}
.example-headers-align .my-own-component {
margin-right: 3rem;
}
Despite these adjustments, the margin is not reflected as demonstrated in https://i.sstatic.net/T2qUx.png
For further insights, the codebase can be accessed from https://github.com/adelinor/add-margin-example#setup-steps-and-margin-display-issue
Your assistance is greatly appreciated