Can the Tab component be customised?

Dash Python
1

Hi, I’m wondering if it’s possible to customise Tabs in the current verison of Dash. I tried doing it this way but it didn’t work:

 dcc.Tabs(id="tabs", value='tab-1', children=[
        dcc.Tab(label='Tab 1r', id='tab-1', value='tab-1r')
], className = 'tabs')

And then in the css file:

.tabs {
  color: white;
  background: coral;
}
2

Unfortunately tab’s styles are inline, so to override them you have to use either !important CSS sugar or add your own classes and define CSS rules with more specific selectors than the inline ones.

With dcc.Tabs(id="tabs") I think the id is only Dash side, meaning the component in HTML does not have such id. The class you are after is tab-parent.

3

We expose several properties that will inject your own CSS, see the *_className properties here: https://dash.plot.ly/dash-core-components/tabs.

I also recommend just reading through the source code if you need more info on the markup: https://github.com/plotly/dash-core-components/blob/master/dash_core_components/Tabs.py