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

Question

我正在其中一个应用程序中使用ng-bootstrap中的accordion组件，并使用/deep/ （aka ::ng-deep和>>> ）选择器来设置其样式。 但是我看到此选择器已被弃用 。

是否可以设置ng-bootstrap组件的样式？

Answer 1

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

从这里： http : //angularjs.blogspot.com/2017/07/angular-43-now-available.html

Answer 2

我已经做了一些挖掘，如果您关闭了组件的视图封装 ，则可以覆盖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;
  }
}

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

Answer 3

您必须进行自定义样式以覆盖scss中的默认bootstrap变量。

您可以在此处找到所有可能的variables ../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”。