Menu
I was wondering how to override the encapsulated CSS of an external component.
So I am using material2 in my project and the tabs component has a the attribute overflow set on tab-body. Is it possible to override the overflow value?
794
Either apply the style="padding:0px;" on the content div inline (not recommended), or load your style after you load your external style sheet. Applying style="padding:0px;" to the body will only affect the body, and not apply to every element within it.
To override the CSS properties of a class using another class, we can use the ! important directive. In CSS, ! important means “this is important”, and the property:value pair that has this directive is always applied even if the other element has higher specificity.
CSS allows you to apply styles to web pages. More importantly, CSS enables you to do this independent of the HTML that makes up each web page. Overriding: Overriding in CSS means that you are providing any style property to an element for which you have already provided a style.
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.
112
From this article
Although the style of a component is well isolated, it can still be easily overridden if necessary. For that, we just need to add an attribute to the body of the page:
<body override> <app></app> </body> The name of the attribute can be anything. No value is needed and the name override makes it apparent what its being used for. To override component styles, we can then do the following:
[override] hello-world h1 { color:red; } Where override is the attribute, hello-world is the target component, and h1 is whatever you are trying to restyle. (get this right or it wont work).
Your component hello-world would be
selector: 'hello-world', styles: [` h1 { color: blue; } `], template: ` <h1>Hello world</h1> ` I think this is the most elegant way.
Alternatively if you are building a library of some sort, you can reset the styling altogether by doing something fancy in your css like:
:host-context(.custom-styles) { //.. css here will only apply when there is a css class custom-styles in any parent elem }
So then to use your component you'd use
<hello-world class="custom-styles">
But this is way less convenient than the first option.
28
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
