如何使用角度中的自定义 css 样式覆盖 ng2-bootstrap 手风琴默认样式答案

【问题标题】：how to override ng2-boostrap accordion default style with custom css style in angular如何使用角度中的自定义 css 样式覆盖 ng2-bootstrap 手风琴默认样式
【发布时间】：2018-09-22 01:20:50
【问题描述】：

我正在尝试使用自定义样式覆盖 ng2-bootstrap 手风琴 css 样式，但该样式未得到应用

HTML

<ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0">
  <ngb-panel class="customclass1" title="Simple">
    <ng-template ngbPanelContent>
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia
      aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
      sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,
      craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings
      occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
      labore sustainable VHS.
    </ng-template>
  </ngb-panel>
</ngb-accordion>

styles.css

.customclass1{
    background-color: yellow!important;
}

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Charts</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
  <app-root></app-root>
</body>
</html>

angular-cli.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "charts"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

我正在尝试更改背景颜色，但未应用样式。谁能告诉我如何覆盖 ng2-bootstrap 手风琴的默认样式

【问题讨论】：

background-color: yellow!important; 无效；尝试在!important 之前放置一个空格。
我尝试放置一个空格，但没有成功

标签： css angular ng2-bootstrap

【解决方案1】：

这样做的方法是不是，通过在<ngb-panel class="customclass1" title="Simple">上添加一个类，然后添加一个css规则，例如：

.customclass1{
  background-color: yellow!important;
}

您最好通过以下方式添加 css 规则：

ngb-accordion /deep/ .card /deep/ [role=tab]{
     background-color: yellow;
}

ngb-accordion /deep/ .card /deep/ [role=tab]#\31 -header{
     background-color: red !important;
}

到那时，您将能够根据 id 自定义选项卡：

检查以下 plnkr 并注意 src/accordion-basic.html 和 src/accordion-basic.css 在使用 id 的样式方面的区别：

http://plnkr.co/edit/x9dXjkF4bPDIgiGHeYFK?p=preview

http://plnkr.co/edit/izfDn4MO3QSjja8mBqq7?p=preview

请注意/deep/ 与>>> 和::ng-deep:: 一起是deprecated，但在它们被删除之前您可以使用它。

【讨论】：

这是一个正确的解决方案，但 angular 说它已被弃用 angular.io/guide/component-styles#deprecated-deep--and-ng-deep 你知道其他方法吗？
AFAIK，到目前为止没有其他选择。与已弃用的替代方案相关：stackoverflow.com/questions/47024236/…。 stackoverflow.com/questions/55259593/…

【解决方案2】：

万一其他人遇到这个问题，使用最新 Angular 版本的正确方法是

ngb-accordion::ng-deep

使用实际的标签和其他深度调用，你可以改变手风琴的任何css属性，例如：

ngb-accordion::ng-deep.card::ng-deep
  .btn
    color: #666666
    text-align: center
    font-weight: 800
    font-size: x-large
  span
    font-size: 1.2rem
    color: #666666

给我这个：

【讨论】：