Search code examples
themesplotly-dashdash-bootstrap-components

dcc.Tabs not being styled using a dbc theme in external_stylesheets

If I recreate the dash-core-components Tabs example and apply a stylesheet, my tabs (and plot area) don't seem to be taking the formatting.


from dash import Dash, dcc, html, Input, Output, callback

import dash_bootstrap_components as dbc

app = Dash(__name__, external_stylesheets=[dbc.themes.SOLAR])

app.layout = html.Div([
    html.H1('Dash Tabs component demo'),
    dcc.Tabs(id="tabs-example-graph", value='tab-1-example-graph', children=[
        dcc.Tab(label='Tab One', value='tab-1-example-graph'),
        dcc.Tab(label='Tab Two', value='tab-2-example-graph'),
    ]),
    html.Div(id='tabs-content-example-graph')
])

@callback(Output('tabs-content-example-graph', 'children'),
              Input('tabs-example-graph', 'value'))
def render_content(tab):
    if tab == 'tab-1-example-graph':
        return html.Div([
            html.H3('Tab content 1'),
            dcc.Graph(
                figure={
                    'data': [{
                        'x': [1, 2, 3],
                        'y': [3, 1, 2],
                        'type': 'bar'
                    }]
                }
            )
        ])
    elif tab == 'tab-2-example-graph':
        return html.Div([
            html.H3('Tab content 2'),
            dcc.Graph(
                id='graph-2-tabs-dcc',
                figure={
                    'data': [{
                        'x': [1, 2, 3],
                        'y': [5, 10, 6],
                        'type': 'bar'
                    }]
                }
            )
        ])

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

enter image description here

This doesn't seem to match the style that would be expected based on https://bootswatch.com/solar/.

Can anyone explain what is happening here? I was hoping for an easy why to apply a clean style, then was surprised to find it does not appear to be working.

Library Versions:

dash 2.9.3
dash-bootstrap-components 1.4.1
dash-core-components 2.0.0
dash-html-components 2.0.0

I tried applying different themes, thinking that the style just wasn't what I was expecting. However all themes don't seem to apply to my tabs. I also looked at how the tabs display for themes on this dbc theme explorer, and they are definitely different.

This question seems to be the same issue, but doesn't address the actual cause. Is this a shortfall in the themes? What would be the best way to work around this styling issue? (minimal code, with theme that applies to the most dash elements)

Solution

  • If you want to style your Tab, you should use dbc.Tab instead of dcc.Tab. Something as below:

    app.layout = html.Div([
    html.H1('Dash Tabs component demo'),
    dbc.Tabs([
        dbc.Tab(tab_id = 'tab-1-example-graph', label='Tab One'),
        dbc.Tab(tab_id = 'tab-2-example-graph', label='Tab Two'),
    ], id="tabs-example-graph", active_tab='tab-1-example-graph'),
    html.Div(id='tabs-content-example-graph')
])

@callback(Output('tabs-content-example-graph', 'children'),
              Input('tabs-example-graph', 'active_tab'))

    enter image description here