如何在Dash Plotly中为指定className类单独设置CSS样式

方法1：使用assets文件夹加载外部CSS（最推荐） #

Dash 默认会自动读取项目根目录下assets文件夹内的所有CSS、JS文件，无需额外配置，操作步骤如下：

• 在运行Dash应用的Python文件同级目录，新建名为assets的文件夹
• 把你写的.stats-list样式代码保存为CSS文件（文件名可自定义，比如custom.css），放入该文件夹
• 重启Dash应用即可，你已为html.Ul设置了className='stats-list'，样式会自动生效，无需修改现有组件代码。

方法2：内嵌Style标签到布局中 #

如果不想单独维护CSS文件，可以直接在应用布局中嵌入样式代码：

app.layout = html.Div([
    # 内嵌样式
    html.Style('''
        .stats-list {
            list-style:none;
            padding:0;
            flex:1;
            color:gray;
        }
    '''),
    # 原有布局代码
    html.Div(className='body', children=[
        html.Ul(className='stats-list', children=[
            # 多个列表项
        ]),
        html.Ul(className='stats-list', children=[
            # 多个列表项
        ]),
        html.Ul(className='stats-list', children=[
            # 多个列表项
        ])
    ])
])

方法3：封装公共组件（适合需要关联Python变量的场景） #

如果你需要用到Python中定义的变量（比如你提到的gray变量），可以封装通用的列表组件，避免重复编写style：

# 你已定义的颜色变量
gray = '#808080'

# 封装公共组件
def StatsUl(children=None, **kwargs):
    default_style = {
        'listStyle': 'none',
        'padding': 0,
        'flex': 1,
        'color': gray
    }
    # 支持传入自定义样式覆盖默认值
    if 'style' in kwargs:
        default_style.update(kwargs.pop('style'))
    return html.Ul(
        className='stats-list',
        children=children,
        style=default_style,
        **kwargs
    )

# 布局中使用封装后的组件
html.Div(className='body', children=[
    StatsUl(children=[
        # 多个列表项
    ]),
    StatsUl(children=[
        # 多个列表项
    ]),
    StatsUl(children=[
        # 多个列表项
    ])
])

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