how to override ng2-boostrap accordion default style with custom css style in angular

问题

I am trying to override the ng2-bootstrap accordion css style with custom style but the style is not getting applied

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": {}
  }
}

I am trying to change the background color and the style is not getting applied.can anyone let me know how can i override the default styles of the ng2-bootstrap accordion

回答1:

The way to do it is not by adding a class on <ngb-panel class="customclass1" title="Simple"> and then adding a css rule such as:

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

You would have a better time adding a css rule by:

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

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

By then you would be able to customize the tab according to the id:

Check the following plnkr and notice the difference between src/accordion-basic.html and src/accordion-basic.css for the styling using id:

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

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

Notice the /deep/ it was deprecated altogether with >>> and ::ng-deep:: but you would be able to use it until they're removed.

来源：https://stackoverflow.com/questions/49787224/how-to-override-ng2-boostrap-accordion-default-style-with-custom-css-style-in-an

标签

css

angular

ng2-bootstrap