设置可折叠面板选项卡短划线引导组件的样式

我想更改选项卡的颜色和对齐方式以使其居中。到目前为止，我一直在使用

style={‘extAlign’：‘Center’}和displace=flex选项，但这会影响内容对齐方式。

任何人都知道如何使用CSS覆盖选项卡中的标题(本例中为第1项、第2项和第3项)

import dash_bootstrap_components as dbc
from dash import html

accordion = html.Div(
    dbc.Accordion(
        [
            dbc.AccordionItem(
                [
                    html.P("This is the content of the first section"),
                    dbc.Button("Click here"),
                ],
                title="Item 1",
            ),
            dbc.AccordionItem(
                [
                    html.P("This is the content of the second section"),
                    dbc.Button("Don't click me!", color="danger"),
                ],
                title="Item 2",
            ),
            dbc.AccordionItem(
                "This is the content of the third section",
                title="Item 3",
            ),
        ],
    )
)

https://dash-bootstrap-components.opensource.faculty.ai/docs/components/accordion/

---

解决方案

您需要将.accordion-button的样式更改为：

.accordion-button {
    text-align: center;
    display: block;
}

将其放置在assets下的.css文件中，该文件应与您的应用程序文件放置在同一目录级别。