- To customize the CSS for a specific component, use styles or
styleUrls (only in the .ts file). Refer to the documentation
- If your CSS applies to the entire application, add it to the styles array
in angular.json
- NOTE: Maybe you are interested in creating a Heroes tutorial
When working with material-angular, remember that material makes extensive use of cdk-overlay. For example, a calendar uses cdk-overlay.
This means that a "component" is created outside of your main app component -you can check this using F12 in your browser-. As a result, the CSS applied to your component cannot affect the "component". To address this, include your CSS in the "styles.css" or "styles.scss" file -common to the entire app-. Usually, components have a property like "panelClass" which allows adding additional selectors to style a component specifically, such as in a calendar.
<mat-form-field class="example-full-width" appearance="fill">
<mat-label>Choose a date</mat-label>
<input matInput [matDatepicker]="picker">
<mat-hint>MM/DD/YYYY</mat-hint>
<mat-datepicker-toggle matSuffix [for]="picker" >
<mat-icon matDatepickerToggleIcon>keyboard_arrow_down</mat-icon>
</mat-datepicker-toggle>
<!--make sure to use panelClass="custom"-->
<mat-datepicker #picker panelClass="custom"></mat-datepicker>
</mat-form-field>
In styles.css:
.custom .mat-calendar-body-label
{
color:red;
}
Refer to this stackblitz example