覆盖外部组件封装的 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40178041/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Overriding the encapsulated CSS of external component
提问by Salma Hamed
I was wondering how to override the encapsulated CSS of an external component.
我想知道如何覆盖外部组件的封装 CSS。
So I am using material2in my project and the tabs component has a the attribute overflow set on tab-body. Is it possible to override the overflow value?
所以我在我的项目中使用material2并且选项卡组件的属性溢出设置为tab-body。是否可以覆盖溢出值？
回答by Meir
You can use the special css /deep/instruction. See the documentation
您可以使用特殊的 css/deep/指令。查看文档
So, if you have
所以，如果你有
app
sub-component
target-component
<div class="target-class">...</div>
You can put in your apps css (or less):
你可以在你的应用中放入 css（或更少）：
/deep/ .target-class {
width: 20px;
background: #ff0000;
}
Obviously, you can put this css fragment in sub-componentas well.
显然，您也可以将这个 css 片段放入sub-component。
回答by Ced
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).
其中 override 是属性， hello-world 是目标组件， h1 是您尝试重新设置样式的任何内容。（做对了，否则就行不通了）。
Your component hello-worldwould be
您的组件hello-world将是
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:
或者，如果您正在构建某种类型的库，您可以通过在您的 css 中做一些花哨的事情来完全重置样式，例如：
:host-context(.custom-styles) {
//.. css here will only apply when there is a css class custom-styles in any parent elem
}
: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">
<hello-world class="custom-styles">
But this is way less convenient than the first option.
但这不如第一个选项方便。
回答by Nasir T
Just check the class that is being applied to the tabs by the external component (use Inspector or any other tool). In your style css file, add the same name of the class for the tabs and set the overflow property along with adding !important to it to make sure it overwrites the previous one. Also make sure your css link to the page is added after the external component css link if any.
只需检查外部组件应用于选项卡的类（使用 Inspector 或任何其他工具）。在您的样式 css 文件中，为选项卡添加类的相同名称并设置溢出属性，同时向其添加 !important 以确保它覆盖前一个。还要确保在外部组件 css 链接（如果有）之后添加页面的 css 链接。
Hope this helps.
希望这可以帮助。
