gpt4 book ai didi

css - 如何使用自定义 css 样式覆盖 ng2-bootstrap Accordion 默认样式

转载 作者:行者123 更新时间:2023-11-28 11:01:25 25 4
gpt4 key购买 nike

我正在尝试使用自定义样式覆盖 ng2-bootstrap Accordion css 样式,但未应用该样式

enter image description here

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了: enter image description here

检查以下 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com