[dash mantine components] change the background color of selected tabs

Dash Python
1

Hi!

I am trying to change the background of a selected tab of Mantine tabs element, but the relevant styles API seems to not provide this possibility, and all my attempts in css resulted in the tab falling back to the unselected bg after loosing focus.

But the component definitely tracks the selected tab and changes the border color in the way that it ‘sticks’ to the element, and the tab remains selected even after it loses focus.

I would appreciate an advise about how could I achieve the same result with selected tab’s background color, ideally without acrobatics around changing properties via callbacks.

2

Hi @tntnkn!

Try adding this to your custom css file:

.mantine-Tabs-tab[data-active="true"] {
    background-color: red; 
}

MRE taken form dash-mantine-docs:

import dash_mantine_components as dmc
import dash
from dash import Input, Output, html, dcc, callback
import plotly.graph_objects as go
import random


def create_graph():
    fig = go.Figure(go.Bar(x=[*range(10)], y=[random.randint(1, 10) for _ in range(10)]))
    return dcc.Graph(figure=fig)


app = dash.Dash(__name__)
app.layout = html.Div(
    [
        dmc.Tabs(
            [
                dmc.TabsList(
                    [
                        dmc.Tab("Tab one", value="1"),
                        dmc.Tab("Tab two", value="2"),
                    ]
                ),
            ],
            id="tabs-example",
            value="1",
        ),
        html.Div(id="tabs-content", style={"paddingTop": 10}),
    ]
)


@callback(
    Output("tabs-content", "children"),
    Input("tabs-example", "value"))
def render_content(active):
    if active == "1":
        return [dmc.Text("Tab One selected"), create_graph()]
    else:
        return [dmc.Text("Tab Two selected"), create_graph()]


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

tabs

mred css

3

Hi!
Thank you for stopping by and spending time on elaborating on this question! This is exactly what I needed.

1 Like