Question

我试图用自定义样式覆盖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>

角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手风琴的默认样式

Answer 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/是deprecated与>>>和::ng-deep::的总和，但是您可以使用它们直到将其删除。

Answer 2

万一其他人迷惑了这个问题，最新的角度版本的正确方法是

telethon-session-sqlalchemy

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

ngb-accordion::ng-deep

给我这个：

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

2 个答案: