I am using Material 2 <md-input-container> in my Angular component. I want to override one of the classes e.g. .mat-input-wrapper defined in Angular Material. But I want to override only in that component and the override should not effect other components in the page.
Here is the screenshot of the rendered element:
As @Dylan pointed out, you have to use /deep/ to alter the CSS within the child compoenets. Here is the answer I was looking for:
:host /deep/ md-input-container .mat-input-wrapper
/deep/ and all aliases of it are now deprecated. No equivalent solution is available. Rumor is they are waiting for w3c to create a solution.
If you are using SCSS try ::ng-deep
::ng-deep {
.sample {
// style
color: green;
}
}
There's no need to wrap with <div class="someCssClassName">. Rather, to style an Angular Material element like the title of a card..
<mat-card>
<mat-card-title>
{{title}}
</mat-card-title>
</mat-card>
CSS:
mat-card mat-card-title {
color: red;
}
Applying this to another 'child' element like <mat-card-content>
mat-card mat-card-content,
mat-card mat-card-title {
color: red;
}
Using VS Code, hovering in the CSS editor will reveal detail of how this CSS will render. In this example, <mat-card>...<mat-card-title>
Of course, if you have multiple uses of the card in a single component, then you will need to make the distinction with a CSS class name adding the class="card-style-1" to the element itself, like <mat-card class="card-style-1".
CSS:
mat-card.card-style-1 mat-card-content,
mat-card.card-style-1 mat-card-title {
color: red;
}
The alternative to this is to create individual components specific to the uses of different cards, styling each as required.
The easiest approach I would suggest for SCSS is:
You can copy the class name of property and override it in style.scss so it will work.
Create a @mixin in new SCSS file and override all properties u want. then import this @mixin in style.scss. It is more cleaner approach.
EDIT: More easy and clear way to override the default css for particular component only:
Open index.html and assign one unique attribute to body, as I have added override
<body override>
<app-root>
<loading-screen></loading-screen>
</app-root>
</body>
Suppose you want to override a <md-input-container> css properties for Employee component which has selector app-employee.
Open style.css and create override css like below.
[override] app-employee .mat-input-container {
// add your custom CSS properties
// this will apply only a particular component
}
Run and Enjoy 😉
The problem with ::ng-deep is, it will apply the style across all the pages and all the components. Meaning its a dirty approach. A better way to do this, is to wrap with a custom class and style the element in your styles.scss/styles.css
Example:
As asked in the question. To override a .mat-input-wrapper, wrap your element with your custom class like:
<md-input-container class='big-input'>. Then in
styles.scss:
.big-input .mat-input-wrapper {
height : 200px;
}
add !important if necessary.
The preferred solution probably would be to define the styles in your own Material theming style sheet. The use of /deep/ is deprecated (Angular V 4.3): https://angular.io/guide/component-styles#special-selectors
You can now use ::ng-deep at as an alternative to defining your own theming style sheet.
However, using the ::ng-deep can influence the use Material icons negatively again when using it to override a default font family (as Material Icons is a font-family as well)
