样式手风琴破折号 bootstrap 组件

Question

我想自定义 accordion bootstrap component 中的选项卡。

这是代码：

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,
    ),
)

渲染这个：

我想做两个调整：

将标题（例如项目 1）设置为 H1，或其他。
当手风琴被激活（打开）时，选项卡的默认颜色为浅蓝色（见屏幕截图）。我想改变这种颜色。怎么样？

我尝试了 css 样式的不同变体，就像建议的那样，但没有成功。

Answer 1

要调整项目样式，您需要更改 .accordion-button 的样式。要在打开手风琴项时调整样式，您需要更改 .accordion-button:not(.collapsed).

的样式

以下是放大“项目”文本并将打开时项目的颜色更改为红色的示例：

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

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

样式手风琴破折号 bootstrap 组件

Styling Accordion dash bootstrap component

css

python

plotly

plotly-dash

dash-bootstrap-components