Question

我正在使用我的某个应用中的ng-bootstrap中的class.getClassLoader( ).getResourceAsStream( "application.properties" );组件和accordion（又名：/deep/和::ng-deep）选择器来设置其样式。但是我看到这个选择器已经deprecated。

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

Answer 1

支持模拟/深度/ CSS选择器（暗影穿孔后代组合器又名＆gt;＆gt;＆gt;）已被弃用以匹配浏览器实现和Chrome的意图删除。 :: ng-deep已经添加为当前使用的开发人员提供临时解决方法这个功能。

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

Answer 2

我已经完成了一些挖掘工作，如果关闭组件的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) { }

}

例如，我在这里定制modal dialog的样式，因为我假设我的示例组件应该显示为模式对话框，我希望它的宽度最大为视图端口的70％小屏幕尺寸：

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

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

Answer 3

您必须使自定义样式覆盖scss中的默认引导变量。

您可以在variables

找到所有可能的../node_modules/bootstrap/scss/_variables.scss

Bootstrap还为我们提供custom文件添加样式../node_modules/bootstrap/scss/_custom.scss

例如：这里我重写了两个影响我手风琴的变量（我改变了一些随机颜色）

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

并且不要忘记删除!default中的_custom.scss并完成自定义样式。

现在需要从css

构建scss

首先全局安装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”。

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

3 个答案: