我正在尝试使用自定义样式覆盖 ng2-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;
}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 Accordion 的默认样式
最佳答案
不是通过在 <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自定义tab了:
检查以下 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::但在它们被移除之前您可以使用它。
关于css - 如何使用自定义 css 样式覆盖 ng2-bootstrap Accordion 默认样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49787224/