如何为ng-bootstrap设置样式 - /deep/的替代方法

Question

我正在使用ng-bootstrap中的accordion组件，并使用/deep/选择器（又称： ::ng-deep和>>>）来设置其样式。但是我看到这个选择器已经过时了。

有没有其他方法来设置ng-bootstrap组件的样式？

- Felipe

---

这同样适用于Angular Material，我想知道答案。我在这里写了一篇文章，并提供了这个Plunker示例，如果有人想尝试它。 - 0mpurdy

Answer 1

我已经进行了一些调查，如果您关闭组件的view encapsulation，则可以覆盖ng-bootstrap样式，方法如下：

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class ExampleComponent {

    constructor(public activeModal: NgbActiveModal) { }

}

例如，这里我正在定制模态对话框的样式，因为我假设我的示例组件应该显示为模态对话框，并且我希望在小屏幕尺寸下其宽度最大为视口的70％：

.modal-dialog {
  @include media-breakpoint-down(xs) {
    max-width: 70vw;
    margin: 10px auto;
  }
}

请注意，关闭视图封装意味着该特定组件的样式将在整个应用程序中可用，因此其他组件将可以访问它们，并且如果您不小心，最终将使用它们。

- Felipe

Answer 2

支持模拟的/deep/ CSS选择器（影子穿透后代组合器，也称为>>>）已被弃用，以匹配浏览器实现和Chrome的意图来删除。 ::ng-deep已添加以提供临时解决方案，供当前使用此功能的开发人员使用。

来源：http://angularjs.blogspot.com/2017/07/angular-43-now-available.html

- DeborahK

Answer 3

你需要在scss中进行自定义样式以覆盖默认的bootstrap变量。

你可以在这里找到所有可能的变量../node_modules/bootstrap/scss/_variables.scss

Bootstrap还提供了一个custom文件，供我们添加我们的样式../node_modules/bootstrap/scss/_custom.scss

例如：在这里，我正在覆盖两个影响我的手风琴的变量（我更改了一些随机颜色）

$link-color:$brand-warning;
$card-bg:$green;

别忘了在_custom.scss中删除!default，这样就完成了自定义样式。

现在需要从scss构建css

首先全局安装npm install -g grunt-cli

然后导航到\my-app\node_modules\bootstrap> npm install，这将安装所有依赖项。

最后运行\my-app\node_modules\bootstrap> grunt，这将创建CSS文件。

希望这样能够正常工作。

在我的情况下，“bootstrap.min.css”没有正确生成，所以我现在在我的.angular-cli.json文件中使用“../node_modules/bootstrap/dist/css/bootstrap.css”。

- Hareesh