问题：

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

令狐经武

2023-03-14

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

HTML

null

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

null

styles.css

null

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

null

index.html

null

<!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>

null

Angular-CLI.json

null

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

null

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

共有1个答案

刘博雅

2023-03-14

null

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

检查以下plnkr并注意src/accordion-basic.html和src/accordion-basic.css之间使用ID进行样式的区别：

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

http://plnkr.co/edit/izfdn4mo3qsjja8mbqq7？p=预览

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

类似资料：

如何使用自定义样式覆盖默认的PrimeFaces CSS？

问题内容：我已经创建了自己的主题作为单独的Maven项目，并且已正确加载了该主题。现在，我想更改组件的大小。例如，一个。它有一个名为的类ui-orderlist-list，它primefaces.css使用200x200的固定尺寸定义。无论我在我的工作中做什么theme.css，它都会被此属性覆盖，并且我无法将内容扩大。对于其他组件，我可能只想覆盖一个组件实例，而不是全部。谁能告诉我该怎
如何覆盖css样式

问题内容：我正在开发页面，现在以我的CSS样式我有以下代码行为我的页面。现在，我的某些页面不需要此行我可能会在页面的内部CSS中覆盖它，这将导致原始行为被忽略？问题答案：使用不推荐，但在这种情况下，我想你应该- 在您的内部CSS中编写此代码-
覆盖CSS样式？

问题内容：我查看了Stack Overflow，但没有找到解决方案，我知道如何在样式存在的情况下覆盖样式，只需更改其属性即可。但是现在我有一种奇怪的样式可以覆盖这是我所拥有的一个例子首先我有一个：现在，我需要使用以下一种样式来覆盖该样式：问题是第一种样式会追加第二种，但是我不希望那样，在第二种样式中我只需要一行，而不是从第一种样式追加？问题答案：您可以将另一个类添加到元素中，而不是重
如何使用自定义textView样式颜色覆盖AppTheme textColor？

具有在样式中指定的默认textColor属性。xml应用主题：如果可以使用样式上的这个新项在某些需要的情况下覆盖它，那将是完美的。xml文件：并在所需的textview xml布局上指定它，如下所示：问题是有些东西不起作用，因为自定义textview显示时使用的是自定义主题的默认颜色（白色），而不是在自定义样式中为该textview指定的自定义颜色（绿色）。我做错了什么？
如何使用外部CSS覆盖内联样式？

问题内容：我有使用内联样式的标记，但是我无权更改此标记。如何仅使用CSS覆盖文档中的内联样式？我不想使用jQuery或JavaScript。 HTML： CSS：问题答案：覆盖内联样式的唯一方法是使用CSS规则旁边的关键字。以下是一个示例。重要笔记：使用不是一个好的做法。因此，您应避免同时使用内联样式。将关键字添加到任何CSS规则后，该规则就可以强行优先于该元素的所有其他CSS规
GWT主题样式覆盖了我的CSS样式

问题内容：我有一些带有自己的CSS的HTML文件。我想在gwt应用程序中使用它们，所以我在应用程序中复制了html和css文件。问题是当我打开HTML时，它使用了gwt主题样式。例如，在我的CSS中，html“主体”的背景色是黑色，但是除非我停用主题，否则它看起来是白色的。如何覆盖gwt主题样式并使用CSS样式？问题答案：就像萨尔法兹（Sarfaz）所说- 应该是您的不得已的选择，因为它

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

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档