如何設置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”。