樣式手風琴選項卡破折號引導組件

Question

我想更改標簽顏色和 alignment 以集中它。 到目前為止我一直在使用

style = {'textAlign': 'center'} 和 displace = flex 選項也是如此，但這會扭曲內容 alignment。

任何人都知道如何使用 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/

Answer 1

您需要將.accordion-button的樣式更改為：

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

將其放在assets下的.css文件中，該文件應與應用程序文件放在同一目錄級別。