Overriding the encapsulated CSS of external component
You can use the special css /deep/
instruction. See the documentation
So, if you have
app
sub-component
target-component
<div class="target-class">...</div>
You can put in your apps css (or less):
/deep/ .target-class {
width: 20px;
background: #ff0000;
}
Obviously, you can put this css fragment in sub-component
as well.
How to override CSS styles of component in Angular?
you could use the ng-deep
selector:
::ng-deep app-button span:hover {
color: green;
}
which will make your styles penetrate to child components. but this functionality is due to be deprecated soon according to the angular team, and people are advised to get off of it. (PERSONAL opinion: too many projects rely on ng-deep for them to deprecate it anytime soon)
the best way to do it currently IMO is with a global style sheet with something like:
app app-button span:hover {
color: green;
}
you also could set the view encapsulation to none on your parent component, but that's functionally similar to a global style sheet, and can be confusing if you don't set things up correctly and forget where / why you put global styles that only load when a component loads, and leads to some bugs in my experience.
Overriding the encapsulated :host-style of external component
Edited:
As found on http://blog.angular-university.io/how-to-create-an-angular-2-library-and-how-to-consume-it-jspm-vs-webpack/: add an attribute to the body-tag:
<body override>
<app></app>
</body>
And in your css: use a selector for this attribute:
[override] hello-world h1 {
color:red;
}
This way, your css does not have to be parsed.
Previous solution:
I've found a solution myself: instead of linking my (theming) css-file in index.html, which isn't parsed, I imported this particular css-file in the app.component.ts annotation.
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet/css" type="text/css" href="/assets/style/app.css" />
</head>
<body>
<app></app>
</body>
</html>
app.component.ts:
import { ... }
@Component({
selector: 'app',
styles: [`
@import "assets/style/theme.css";
`],
template: `
...`,
})
export class AppComponent {...}
theme.css:
sidebar {background: red; }
Overriding global css in a new component Angular
Add !important
in the end of your CSS
rule to ovverride global styles.
Example:
.btn {
background-color: red !important;
}
Hope this helped.
Overwrite css class property for library component in Angular-5
I used ::ng-deep pseudo-class selector
, refereed this Docs https://blog.angular-university.io/angular-host-context for angular view encapsulation.
Below code snippet works for me to overwrite the css property using ng-deep.
e.g in my case <test-dropdown>
is a angular component which takes default css class .dropdown
of it, now i want to modify min-width
property so i did it using ng-deep pseudo-class selector, same for other angular component also.
test-dropdown::ng-deep .dropdown {
min-width: 20%;
}
test-button::ng-deep .test-button {
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
text-align: center;
cursor: pointer;
min-width: 20%;
}
test-date-picker::ng-deep .date {
min-width: 100%;
line-height: 1.42857143;
}
test-date-picker::ng-deep .date-picker {
min-width: 100%;
line-height: 1.42857143;
}
Extend/Override style of reusable angular2 component
For the solution 5, you need to create a subclass for the targetted component, create a custom decorator that handles / overrides the metadata and set it for the current sub component.
Here is a sample:
@CustomComponent({
styleUrls: ['css/style.css']
})
export class OverridenComponent extends SomeComponent {
}
The CustomComponent
decorator would look like this:
export function CustomComponent(annotation: any) {
return function (target: Function) {
var parentTarget = Object.getPrototypeOf(target.prototype).constructor;
var parentAnnotations = Reflect.getMetadata('annotations', parentTarget);
var parentAnnotation = parentAnnotations[0];
Object.keys(parentAnnotation).forEach(key => {
if (!isPresent(parentAnnotation[key])) {
annotation[key] = parentAnnotation[key];
}
});
var metadata = new ComponentMetadata(annotation);
Reflect.defineMetadata('annotations', [ metadata ], target);
}
}
See this question for more details:
- Extending component decorator with base class decorator
How do I prevent Angular component styling override from carrying over to other components?
Your issue is caused by ::ng-deep, which will apply style to all .mat-input.underline elements in the page once the component has been loaded and style injected.
If you really want to keep the ::ng-deep combinator, you can add the :host selector to prefix your rule, which will target the host element and not leak the css to other components (apart from child components)
:host ::ng-deep .mat-input-underline
{
display: none;
}
https://angular.io/guide/component-styles#host
Angular - How To Organize CSS Overrides Across Components For The App
You can overwrite children CSS classes from the parent componet. this is the way:
Assuming your child component have this CSS
.child-class {
background-color: blue;
}
When you use this component the background color will be blue. But if you want to change that color to RED. In the parent component where you want the change you need to do this:
In your parent component
:host {
::ng-deep{
.child-class {
background-color: red;
}
}
}
:host this refers to the component's HTML tag (that is created by Angular, in your case the tag of the component that contains the app-custom-button). Also you can apply css to the component tag.
for example:
:host{
width: 100vw;
height: 100vh
}
And with ::ng-deep you can overwrite ALL styles inside your compoent. Does not matter if is a style from your child compoenent, grandchild, great-great-grandson, etc... even if its a component from an external library.
So... For example you can have the "custom background color as blue" then in one component you can keep that color but in other component you can change the color to red and in other component you can change the color to green....
Related Topics
Is There a CSS Selector for Elements Containing Certain Text
How to Make a Child Div'S Width Wider Than the Parent Div Using Css
Bootstrap Center Vertical and Horizontal Alignment
How to Really Isolate Stylesheets in the Google Chrome Extension
How to Remove the Border Highlight on an Input Text Element
Equal Height Rows in CSS Grid Layout
Nth-Child Doesn't Respond to Class
Css Image Size, How to Fill, But Not Stretch
How to Hover Over One Element and Affect a Different Element
How to Get a Parent Element to Appear Above Child
How to Set the Height of Vuetify Card
Advantages of Using Display:Inline-Block VS Float:Left in Css
Center a Column Using Twitter Bootstrap 3
Z-Index Not Working With Fixed Positioning
Why Do Browsers Create Vendor Prefixes For CSS Properties