如何在angular中用自定义css样式覆盖ng 2-boostrap accordion 默认样式

uz75evzq 于 2023-01-18 发布在 Angular

关注(0)|答案(3)|浏览(228)

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

样式.css

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

索引.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>

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

我正在尝试更改背景颜色，但样式未应用。有人能告诉我如何覆盖ng 2-bootstrap accordion 的默认样式吗

css

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

3条答案

按热度按时间

jdzmm42g1#

方法是***而不是***在<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，但您可以使用它，直到它们被删除。

赞(0）回复(0）举报 2023-01-18

ohtdti5x2#

如果其他人遇到这个问题，正确的方法与最新的Angular 版本是

ngb-accordion::ng-deep

使用实际标记和其他深度调用，您可以更改accordion的任何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

给了我这个：

赞(0）回复(0）举报 2023-01-18

cbeh67ev3#

刚刚处理了这个问题后，升级到最新版本的Angular ， Bootstrap 等，我想提供一个更详细的答案。
我的经验是有两种主要的方法

1.使用[panelClass]属性，然后替换可折叠组件及其子组件中的现有样式。

这种方式更挑剔，可能需要更多的试验和错误来配置到您所需的规格。
网页：

<accordion>
    <accordion-group heading="test" [panelClass]="'custom-class'"></accordion-group>
    <accordion-group heading="test2" [panelClass]="'custom-class'"></accordion-group>
</accordion>

注意[panelClass] - Angular中额外的一组引号，否则它会查找预置。您可以通过初始化一个包含您想要的自定义类名称的字符串变量并将其弹出来解决这个问题。*

可能的css（可能不精确）：

accordion-group::ng-deep .custom-class>a{background-color: black !important;}
accordion-group::ng-deep .custom-class>a:hover{color:white !important;}

2.跟踪组件使用的特定类（您的web浏览器的开发工具很有用），并在必要时使用常用的css规范（：：ng-deep、！important、'〉'等）。例如，在折叠组中，折叠组的标题使用.btn、.btn-link等。

例如，如果要将折叠组件组标题中的默认下划线更改为仅在（悬停）事件中显示：
网页：

<accordion>
    <accordion-group heading="test" id="blah"></accordion-group>
    <accordion-group heading="test2"></accordion-group>
</accordion>

CSS：

#blah .btn{text-decoration: none;}
#blah .btn:hover{text-decoration: underline;}

我发现方法#2更简单，它只需要对您使用的组件进行一点调查（无论如何可能不是一件坏事）。

赞(0）回复(0）举报 2023-01-18

我来回答

如何在angular中用自定义css样式覆盖ng 2-boostrap accordion 默认样式

3条答案

相关问题

热门标签

最新问答