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

Question

我在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 {

Answer 1

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

encapsulation: ViewEncapsulation.None

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