'Styling Accordion dash bootstrap component

I would like to customize the tabs in the accordion bootstrap component.

This is the code:

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

rendering this: enter image description here

I hev two ajdustments I want to make:

  1. Set the title (eg. Item 1) to H1, or something else.

  2. When accordion is activated (open) the default color of the tab is light blue (see screenshot). I want to change this color. How?

I have tried different variations of css styling, like what is suggested here, but with no luck.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source