Menu
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?
748
The class Panel is the simplest container class. It provides space in which an application can attach any other component, including other panels. It uses FlowLayout as default layout manager.
The documentation at https://angular.io/guide/component-styles states this about :ng-deep : The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools.
Angular will put styles from your components directly into the . js files, and all third-party, library or global styles go into a dedicated styles. css in the /dist folder. It won't remove any unused styles automatically.
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;
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
