如何设计 ng-bootstrap - 替代 /deep/

Question

我在我的一个应用程序中使用来自 ng-bootstrap 的 accordion 组件和 /deep/（又名：::ng-deep 和 >>>）选择器来设置它的样式。但是我看到这个选择器是 deprecated.

是否有替代方法来设置 ng-bootstrap 组件的样式？

Answer 1

Support for the emulated /deep/ CSS Selector (the Shadow-Piercing descendant combinator aka >>>) has been deprecated to match browser implementations and Chrome’s intent to remove. ::ng-deep has been added to provide a temporary workaround for developers currently using this feature.

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

Answer 2

您必须制作自定义样式以覆盖 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 文件。

这应该很有希望。

In my case "bootstrap.min.css" was not generated correctly, so now iam using "../node_modules/bootstrap/dist/css/bootstrap.css " in my .angular-cli.json file.

Answer 3

我做了一些挖掘，如果您关闭组件的 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;
  }
}

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

如何设计 ng-bootstrap - 替代 /deep/

How to Style ng-bootstrap - Alternative to /deep/

css

twitter-bootstrap

ng-bootstrap

angular