implement external_stylesheets with dash-bootstrap only to accordion component

Question

in below code which represents main section of my app I need to apply external_stylesheets which works only with accordion component. What should I change in below code because currently this style is applied for whole app and it cause unwanted style changes. Thanks in advance for help!!!!

import numpy
import pandas as pd
from jupyter_dash import JupyterDash
from dash.dependencies import Input, Output
from dash import dcc
from dash import html
import plotly.express as px
import plotly.graph_objects as go
import dash
import dash_bootstrap_components as dbc
from dash import dash_table
from IPython.core.display import display, HTML
display(HTML("<style>.container { width:100% !important; }</style>"))

 external_stylesheets = [dbc.themes.UNITED]
app = JupyterDash(__name__, external_stylesheets=external_stylesheets)

#sets up entire layout of the site
app.layout = html.Div([
    dcc.Location(id='url', refresh=False),
    html.Div(id='page-content', style = {'font-family': 'Roche Sans'}),
])

app.config.suppress_callback_exceptions = True


# Update the index/page
@app.callback(dash.dependencies.Output('page-content', 'children'),
              [dash.dependencies.Input('url', 'pathname')])
def display_page(pathname):
    if pathname == '/building-report-intro':
        return brp_intro_layout
    elif pathname == '/building-report-creation':
        return brp_creation_layout
    elif pathname == '/process-technology-intro':
        return ptr_intro_layout
    elif pathname == '/process-technology-report-creation':
        return ptr_creation_layout
    elif pathname == '/brp-view':
        return brp_report_view
    else:
        return index_page
    # You could also return a 404 "URL not found" page here

if __name__ == '__main__':
    app.run_server(debug=True)

score -1 · Answer 1 · answered Feb 10 '22 at 12:50

Yes this is possible. Here is a guide:

Stop applying the external_stylesheet "dbc.themes.BOOTSTRAP", as this will affect all components on the dashboard
You add a css file to the assets folder that sits next to your application python file. In this file, you add the bootstrap styling that you want to apply depending on the components. So in your case, you only want to apply bootstrapping to accordions, so only have the accordion code in this css file. You can get this styling from the official bootstrap accordion style located here between lines 4646 and 4753 (as of the time of writing this answer).
Restart your server and you should only have bootstrap styling to the accordions in your app.

implement external_stylesheets with dash-bootstrap only to accordion component

1 Answers1