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

本文介绍了如何使用角度中的自定义css样式覆盖ng2-boostrap手风琴默认样式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试使用自定义样式覆盖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手风琴的默认样式

推荐答案

方法是 not ，方法是在<ngb-panel class="customclass1" title="Simple">上添加一个类，然后添加一个CSS规则，例如:

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

您最好通过以下方式添加CSS规则:

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

到那时，您将能够根据ID自定义标签:

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

检查以下plnkr并注意src/accordion-basic.html和src/accordion-basic.css之间使用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

请注意，/deep/与>>>和::ng-deep::一起已被已弃用，但您将可以使用它，直到将其删除.

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

这篇关于如何使用角度中的自定义css样式覆盖ng2-boostrap手风琴默认样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！