css - 如何覆盖默认引导样式？

Question

我正在开发一个基于 Angular 并使用 Bootstrap 的网页。当我添加一个 Angular 模块时，会创建一个 .scss 文件。但是，即使我的 .ts 文件将我的 .scss 指定为 styleUrl，该页面仍然使用引导程序重新启动样式。

具体来说，我现在正试图简单地更改页面的背景颜色，但这似乎是不可能的。它所改变的只是这个奇怪的jumbotron框定义的区域。

我是否可能必须在我的 html 代码中指定我想使用样式表？我以为我已经通过在我的 .ts 中链接样式表来做到这一点。

这是我的 component.ts 和 component.scss 代码，以及来自 chrome 检查器的屏幕截图：

.ts

import {Component, OnInit} from '@angular/core';
import {AuthService} from '../../services/auth.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})

.scss

.jumbotron {
  background: none
}
body {
  background-color: #7EF911
}

如何将我的 css 定义为比 bootstrap 的默认内容更重要？非常感谢！

标签： cssangular

Answer 1

要覆盖 Bootstrap 样式，请尝试使用ng-deep

:host ::ng-deep .jumbotron {
  background: none
}
:host ::ng-deep body {
  background-color: #7EF911
}