重写外部组件的封装CSS
我想知道如何覆盖外部组件的封装CSS。
因此，我在我的项目中使用material2，选项卡组件在tab-body上设置了属性溢出。是否可以覆盖溢出值？
回答 6
Stack Overflow用户
发布于 2016-10-21 13:49:32
您可以使用特殊的css /deep/指令。见文件
所以，如果你有
app
sub-component
target-component
<div class="target-class">...</div>您可以在您的应用程序css (或更少)：
/deep/ .target-class {
width: 20px;
background: #ff0000;
}显然，您也可以将这个css片段放在sub-component中。
Stack Overflow用户
发布于 2018-09-15 21:37:35
尽管组件的样式很好地隔离，但如果有必要，它仍然可以很容易地被重写。为此，我们只需向页面正文添加一个属性：
<body override>
<app></app>
</body>属性的名称可以是任何内容。不需要任何值，并且名称重写使它清楚地显示了它的用途。要覆盖组件样式，我们可以执行以下操作：
[override] hello-world h1 {
color:red;
}其中覆盖是属性，hello-world是目标组件，h1是您想要重新样式的东西。(把这件事做好，否则就行不通)。
您的组件hello-world将是
selector: 'hello-world',
styles: [`
h1 {
color: blue;
}
`],
template: ` <h1>Hello world</h1> `我认为这是最优雅的方式。
或者，如果您正在构建某种类型的库，您可以通过在css中做一些花哨的操作来完全重置样式：
:host-context(.custom-styles) { //.. css here will only apply when there is a css class custom-styles in any parent elem }
所以要使用您要使用的组件
<hello-world class="custom-styles">
但这比第一种选择要方便得多。
Stack Overflow用户
发布于 2021-07-27 07:18:20
::ng-deep .tag-or-css-class-you-want-to-override {
/* Add your custom css property value. */
}语法::ng-deep用于覆盖外部css类或标记，而不使用ViewEncapsulation.None。
https://stackoverflow.com/questions/40178041
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号