如何样式化 ng-bootstrap - 替代 /deep/

Posted 2023-03-06

【中文标题】如何样式化 ng-bootstrap - 替代 /deep/

【英文标题】：How to Style ng-bootstrap - Alternative to /deep/

【发布时间】：2018-01-08 18:37:06

【问题描述】：

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

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

【问题讨论】：

这也适用于角材料，我想知道这个问题的答案。我写了here 和this plunker example，如果有人想试试的话

【参考方案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)  

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

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

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

【参考方案2】：

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

你可以在这里找到所有可能的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”。

【参考方案3】：

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

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