How to change the Angular Material 2 CSS imports order?
Question
On an Angular 2 app, built with Angular CLI , I've set up the Angular 2 Material components following the official installation guide .
Angular 2 Material is placing its main CSS styles in the page <head> always below my custom CSS styles. Which creates implications on my side if I need to override them.
How can I force Angular 2 Material to place its core CSS styles above the styles which I defined inside my Angular CLI main (entry) CSS file?
4 answers
solution1
1 2017-11-10 11:58:14
import material theme in style.css file on root:
eg
@import "../node_modules/@angular/material/prebuilt-themes/indigo-pink.css";
you can replace indigo-pink.css own your choice.
solution2
0 2017-06-05 19:18:48
I think the issue you are having is due to having some references to your css files in the index.html and having others in the angular-cli.json file.
Below is an example of my angular.cli json file and index.html
Whatever you have defined in index.html is going to come before what you have defined in the angular-cli.json file. If you want to reorder them, include references to all css files in the angular-cli.json file.
Notice how my styles.css file is the last thing listed in the angular-cli.json file.
Edit (after rereading the original question again)
I think you need to create your own custom theme and import it.
Per Angular Material's documentation
In order to style your own components with Angular Material's tooling, the component's styles must be defined with Sass.
All you need is to create a @mixin function in the custom-component-theme.scss
See Angular Material's documentation on Theming your Own Components and their Theming Guide
solution3
0 2019-01-09 03:31:04
I have solved by loading the custom css after the view has loaded.
export class AppComponent implements AfterViewInit {
ngAfterViewInit() {
this.linkExternalStyleSheet('assets/styles/custom-theme.css');
}
linkExternalStyleSheet(externalStyleSheetUrl: string) {
const overrideStyleSheet: any = document.getElementById('extStyleLink');
if (overrideStyleSheet) {
overrideStyleSheet.href = externalStyleSheetUrl;
} else {
const link = document.createElement('link');
link.id = 'extStyleLink';
link.rel = 'stylesheet';
link.type = 'text/css';
link.media = 'screen';
link.href = externalStyleSheetUrl;
document.getElementsByTagName('head')[0].appendChild(link);
}
}
}
solution4
0 2019-07-22 08:15:22
Yes, In Angular material it adds the intern CSS dynamically when the element/component gets load. So, you cannot change its order.
But to solve your problem, you can use CSS specificity to override it. You can add your custom class in the body or the app-component and by using SCSS/CSS you can override material CSS with your own CSS.
Here is the example using SCSS, for change in checkbox styling. And project__app class name, which I have mentioned in the app-component. You can also use body instead of it or create a specific class on the parent to the element.
.project__app
{
/* checkbox customization */
.mat-checkbox-layout
{
margin-bottom: 0px;
}
.mat-checkbox-inner-container
{
height: 20px;
width: 20px;
}
.mat-checkbox-frame {
border-color: rgba(0, 0, 0, 0.5);
border-width: 1px;
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.