ng-bootstrap TimePicker 微调器轮廓可见答案

【问题标题】：ng-bootstrap TimePicker spinners outline is visibleng-bootstrap TimePicker 微调器轮廓可见
【发布时间】：2017-11-11 08:03:14
【问题描述】：

我试图了解为什么我的 ngb-timepicker 的微调器轮廓是可见的，我怀疑这是css的问题，但坦率地说，我对这个领域的了解还不够。解决这个问题的方法将不胜感激。（即使解决方案包括通过 css 隐藏它，我自己也不太了解）

示例代码：

HTML：

<div mat-dialog-content>
    <ngb-timepicker [(ngModel)]="data.time" ></ngb-timepicker>
</div>

css 是空的，我只在 TS 上使用常规

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

我同时使用了导入的 Angular 材料

@import '../node_modules/@angular/material/prebuilt-themes/indigo-pink.css';

styles.css 和 ng-bootstrap 使用在 index.html 上导入的 bootstrap 4.0 css，它们之间是否有可能发生冲突？

【问题讨论】：

请添加您用于 mcve 的代码 stackoverflow.com/help/mcve
这可能与在材料dialog 内部使用ngb-timepicker 有关。众所周知，材料不能很好地与其他物品搭配使用。确保你设置了ViewEncapsulation.none，但除此之外，如果你决定在你的 Angular 项目中使用 Material 2，你需要遵守他们的风格指南（内容很丰富）。
@Z.Bagley ，遗憾的是它没有成功，结果是一样的。我希望我的项目只是 Material，但遗憾的是他们没有 TimePIcker，所以我必须即兴发挥。
它确实有按钮和输入......你可以使用纯材料项目构建一个“时间选择器”。您是否在根组件（app.component.ts）上设置了 ViewEncapsulation？
是的，我这样做了，并且在所有其他组件上确保它没有效果。创建它并不难，因为它只有 4 个按钮和 2 个输入，但我希望它时尚而且我不知道如何做到这一点，（我已经尝试使用 2 个下拉列表来显示小时和分钟，但我而是像我发布的那样）

【解决方案1】：

当您使用 bootstrap 4.0.0-beta.2 和 ng-bootstrap 1.0.0-beta.5 时，时间选择器中的按钮边框实际上存在一个错误em>。

ng-bootstrap 仅使用 btn-link 类来自定义这些按钮。它适用于引导程序 4.0.0-beta，但不适用于 beta.2。

已经有一个fix，它将在 ng-bootstrap 的下一个版本中提供。

【讨论】：