Issue
First I'm french so sorry if I make mistakes. Second I'm new in angular so please describe me your answers as much as possible. Thanks
So I want to import a custom css file in my angular project but the problem is when I put the path to the file in the .ts file and in the .html file, The whole custom and component style is overwrites.
I have no error on my terminal.
Do you have some solutions for this little problem ?
Thanks to those who will respond
Solution
- If your css is only related to the component you use styles or styleUrls (only in the .ts). See the docs
- If your .css is for all the app you should add in the styles array in angular.json
- NOTE: Perhafs you want to make a tutorial of Heroes
When we ork with material-angular, we need take account that material work using intensivaly cdk-overlay. (e.g. a calendar use cdk-overlay).
This mean that create a "component" outside your component -really outside of the main-app- (you can see if use F12 in your navigator). This makes that the .css you use in your component not can "reach" the "component". For this you need include your .css in your "styles.css" or "styles.scss" -that are common to all the app-. Generally all this components has a property "panelClass" (or similar) you can use a addicional selector if only want to change in a component, e.g. 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>
<!--see that you use panelClass="custom"-->
<mat-datepicker #picker panelClass="custom"></mat-datepicker>
</mat-form-field>
And in styles.css
.custom .mat-calendar-body-label
{
color:red;
}
see a stackblitz
Answered By - Eliseo
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.