"樣式化 Accordion dash 引導組件"

Question

我想自定義手風琴引導組件<\/a>中的選項卡。

這是代碼：

import dash_bootstrap_components as dbc
from dash import html

accordion = html.Div(
    dbc.Accordion(
        [
            dbc.AccordionItem(
                "This is the content of the first section", title="Item 1"
            ),
            dbc.AccordionItem(
                "This is the content of the second section", title="Item 2"
            ),
            dbc.AccordionItem(
                "This is the content of the third section", title="Item 3"
            ),
        ],
        start_collapsed=True,
    ),
)

Answer 1

要調整 Item 樣式，您需要更改.accordion-button<\/code>的樣式。 要在打開手風琴項時調整樣式，您需要更改.accordion-button:not(.collapsed)<\/code>的樣式。

這是一個放大“項目”文本並將項目打開時的顏色更改為紅色的示例：

.accordion-button {
    font-size: xx-large;
}

.accordion-button:not(.collapsed) {
    background-color: red;
}