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

Dash Python
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