僅對手風琴組件使用 dash-bootstrap 實現 external_stylesheets

Question

在下面代表我的應用程序主要部分的代碼中，我需要應用僅適用於手風琴組件的 external_stylesheets。 我應該在下面的代碼中更改什么，因為目前此樣式應用於整個應用程序並且會導致不需要的樣式更改。 在此先感謝您的幫助！！！！

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)

Answer 1

是的，這是可能的。 這是一個指南：

1. 停止應用 external_stylesheet "dbc.themes.BOOTSTRAP" ，因為這會影響儀表板上的所有組件
2. 您將css文件添加到位於應用程序 python 文件旁邊的assets文件夾中。 在此文件中，您可以根據組件添加要應用的引導程序樣式。 所以在你的情況下，你只想將引導應用到手風琴，所以只有這個 css 文件中的手風琴代碼。 您可以從位於此處第 4646 行和 4753 行之間的官方引導手風琴樣式（截至撰寫此答案時）獲得此樣式。
3. 重新啟動您的服務器，您應該只對應用程序中的手風琴進行引導樣式設置。