时间戳

首页 > 解决方案 > 在角度 7 中覆盖身体背景颜色

css - 在角度 7 中覆盖身体背景颜色

问题描述

我一直在尝试覆盖我的登录和注册组件的背景主体，但它不起作用我尝试添加一个带有 CSS 类的 div，设置其背景颜色，但页面底部未设置为我选择的颜色。我将不胜感激有关解决它的最佳方法的任何建议。

  .login-page{
    height: 100% !important;
    background-color: #e40134 !important;
   }

标签： cssangular

解决方案

如果要更改某些组件中的主体类，请使用 ngOnInit 和 ngOnDestroy

  //inject in the constructor the "document"
  constructor(@Inject(DOCUMENT) private _document) { }

  //in init you add a class to de body
  ngOnInit() {
    this._document.body.classList.add('new-body-class');
  }
  //in destroy remove the class
  ngOnDestroy() {
    this._document.body.classList.remove('new-body-class');
  }

和

.new-body-class{
   background-color: #e40134;
}

new-body-class可以是定义的类，也styles.css可以使用ViewEncapsulation.None. 小心，ViewEncapsulation.None使组件的 .css 对所有应用程序都是通用的，所以如果你写，例如

h5{color:red}
.new-body-class{
   background-color: #e40134;
}

此外更改背景，您的应用程序中的所有h5 都变为红色

推荐阅读