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

如何使用component.css（角度）覆盖styles.css

1 个答案: