如何在Plotly Dash中修改dmc Slider的刻度文本样式？

问题描述 #

我用Dash Mantine Components（dmc）实现了一个调整柱状图透明度的Slider，已经能修改滑块条的尺寸和圆角，但无法修改刻度的字号与颜色。之前用dcc.Slider时，我可以通过以下CSS类控制样式：

.rc-slider-mark-text {
  font-size: 10px;
  color: blue;
}

.rc-slider-mark-text-active {
  font-size: 10px;
  color: red;
}

但尝试修改CSS文件或在dmc Slider的style参数中设置字号、颜色都无效，想知道有没有类似方法控制dmc.Slider的刻度样式，我的代码示例如下：

import dash
from dash import dcc, html, Input, Output
import dash_bootstrap_components as dbc
import dash_mantine_components as dmc
import plotly.express as px
import pandas as pd

df = pd.DataFrame({
   'Fruit': ['Apple','Banana','Orange','Kiwi','Lemon'],
   'Value': [1,2,4,8,6],
   })

external_stylesheets = [dbc.themes.SPACELAB, dbc.icons.BOOTSTRAP]

app = dash.Dash(__name__, external_stylesheets = external_stylesheets)


filter_box = html.Div(children=[
    html.Div(children=[
        dmc.Text("trans"),
        dmc.Slider(id = 'bar_transp',
                min = 0,
                max = 1,
                step = 0.1,
                marks = [
                    {"value": 0, "label": "0"},
                    {"value": 0.2, "label": "0.2"},
                    {"value": 0.4, "label": "0.4"},
                    {"value": 0.6, "label": "0.6"},
                    {"value": 0.8, "label": "0.8"},
                    {"value": 1, "label": "1"},
                   ],
           value = 1,
           size = 'lg',
            style = {"font-size": 2, "color": "white"}, # 此设置无效
           ),
    ], className = "vstack",            
    )
])

app.layout = dbc.Container([
    dbc.Row([
        dbc.Col(html.Div(filter_box)),
        dcc.Graph(id = 'type-chart'),
    ])
], fluid = True)


@app.callback(
    Output('type-chart', 'figure'),
    Input('bar_transp', 'value'))     
def chart(bar_transp):
    df_count = df.groupby(['Fruit'])['Value'].count().reset_index(name = 'counts')
    type_fig = px.bar(x = df_count['Fruit'], 
                  y = df_count['counts'],
                  color = df_count['Fruit'],
                  opacity = bar_transp,
                  )
    return type_fig

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

解决方法 #

dmc的Slider使用独立的CSS类名，和dcc的rc-slider-*不兼容，你需要针对dmc对应的类编写自定义样式：

1. 注入自定义CSS样式 #

直接在应用的layout中添加html.Style组件，写入针对dmc Slider刻度的样式：

/* 所有刻度文本的基础样式 */
.mantine-Slider-mark {
    font-size: 12px;
    color: blue;
}
/* 激活态刻度文本的样式（对应滑块当前值的刻度） */
.mantine-Slider-markActive {
    font-size: 14px;
    color: red;
    font-weight: bold;
}

2. 修改后的完整代码 #

将自定义样式加入到app.layout中，修改后的代码如下：

import dash
from dash import dcc, html, Input, Output
import dash_bootstrap_components as dbc
import dash_mantine_components as dmc
import plotly.express as px
import pandas as pd

df = pd.DataFrame({
   'Fruit': ['Apple','Banana','Orange','Kiwi','Lemon'],
   'Value': [1,2,4,8,6],
   })

external_stylesheets = [dbc.themes.SPACELAB, dbc.icons.BOOTSTRAP]

app = dash.Dash(__name__, external_stylesheets = external_stylesheets)

# 自定义Slider刻度样式
custom_style = html.Style("""
.mantine-Slider-mark {
    font-size: 12px;
    color: blue;
}
.mantine-Slider-markActive {
    font-size: 14px;
    color: red;
    font-weight: bold;
}
""")

filter_box = html.Div(children=[
    html.Div(children=[
        dmc.Text("trans"),
        dmc.Slider(id = 'bar_transp',
                min = 0,
                max = 1,
                step = 0.1,
                marks = [
                    {"value": 0, "label": "0"},
                    {"value": 0.2, "label": "0.2"},
                    {"value": 0.4, "label": "0.4"},
                    {"value": 0.6, "label": "0.6"},
                    {"value": 0.8, "label": "0.8"},
                    {"value": 1, "label": "1"},
                   ],
           value = 1,
           size = 'lg',
           ),
    ], className = "vstack",            
    )
])

app.layout = dbc.Container([
    custom_style,  # 加入自定义样式
    dbc.Row([
        dbc.Col(html.Div(filter_box)),
        dcc.Graph(id = 'type-chart'),
    ])
], fluid = True)


@app.callback(
    Output('type-chart', 'figure'),
    Input('bar_transp', 'value'))     
def chart(bar_transp):
    df_count = df.groupby(['Fruit'])['Value'].count().reset_index(name = 'counts')
    type_fig = px.bar(x = df_count['Fruit'], 
                  y = df_count['counts'],
                  color = df_count['Fruit'],
                  opacity = bar_transp,
                  )
    return type_fig

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

说明 #

• .mantine-Slider-mark 控制所有刻度文本的默认样式，你可以调整font-size、color等属性
• .mantine-Slider-markActive 控制当前滑块值对应的激活态刻度样式，可单独设置不同的字体大小、颜色或粗细

内容的提问来源于stack exchange，提问作者jonboy