如何用 component.css (Angular) 覆盖 styles.css答案

【问题标题】：How to override styles.css with the component.css (Angular)如何用 component.css (Angular) 覆盖 styles.css
【发布时间】：2019-03-20 16:55:52
【问题描述】：

我在 styles.css 中有一个通用的 .modal-content 设置。这适用于应用程序中的每个模态面板。我想在 component.css 中覆盖它的宽度。这个组件还有一个模态面板，即使我在component.css中加入以下内容，模态也会保持它的全局宽度。

.modal-content{
  border-radius: 0;
  border:none;
  width: 25%;
}

即使我使用!important 也没有任何效果。

如何覆盖全局 css 值？

编辑

@Component({
  selector: 'app-base-data',
  templateUrl: './base-data.component.html',
  styleUrls: ['./base-data.component.css']
})
export class BaseDataComponent implements OnInit {

【问题讨论】：

你能把你的组件 html 和 ts 也贴出来吗？你使用什么视图封装策略？
可以在组件中设置encapsulation: ViewEncapsulation.None
建议关闭ViewEncapsulation 也可能会导致更多问题
@JoelJoseph 它有效。让它成为一个答案。我会接受的。
@Sanyifejű 完成

标签： css angular

【解决方案1】：

要覆盖组件样式文件的全局样式规则，请将其添加到您的 component.ts

encapsulation: ViewEncapsulation.None

查看官方文档：https://angular.io/api/core/ViewEncapsulation

【讨论】：