如何樣式ng-bootstrap-替代/ deep/

Question

我在我的一個應用程序和/deep/（又名：::ng-deep和>>>）選擇器中使用ng-bootstrap的accordion組件來設置其樣式。但是我看到這個選擇器已經是deprecated。

是否有替代設置ng-bootstrap組件的樣式？

的模擬/深/ CSS選擇器

Answer 1

我已經做了一些挖掘，這是可能的，如果你關閉了view encapsulation的一個組成部分，像這樣覆蓋NG-引導樣式：

@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; 
    } 
} 

PL請注意，關閉視圖封裝意味着此特定組件的樣式將在整個應用程序中可用，因此其他組件將可以訪問它們，並且如果您不小心將最終使用它們。

Answer 2

支持（暗影刺穿 後裔組合子又名>>>）已被棄用，以匹配瀏覽器 實現和Chrome的意圖刪除。 :: ng-deep已被 添加，爲當前使用 此功能的開發人員提供臨時解決方法。

從這裏：http://angularjs.blogspot.com/2017/07/angular-43-now-available.html

Answer 3

你必須要自定義樣式來覆蓋SCSS標準的引導變量。

您可以在這裏找到所有可能的variables../node_modules/bootstrap/scss/_variables.scss

引導還提供了一個custom文件爲我們添加我們的造型../node_modules/bootstrap/scss/_custom.scss

爲如：我在這裏覆蓋兩個可變的是影響我的手風琴（我改變了一些隨機的顏色）

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

不要忘記在_custom.scss刪除!default你用做丘斯托m造型。

現在需要建立css從scss

首先安裝npm install -g grunt-cli全球

然後導航到\my-app\node_modules\bootstrap> npm install，這將安裝所有的依賴。

最後運行\my-app\node_modules\bootstrap> grunt，這將創建css文件。

這應該有希望。

在我的情況「bootstrap.min.css」不正確生成，所以現在IAM在我.angular-cli.json文件中使用「../node_modules/bootstrap/dist/css/bootstrap.css」 。