如何解决Dash Table设置style_filter后筛选文本仍为深灰色的问题？

你遇到的问题是因为style_filter仅控制筛选容器的样式，而筛选输入框（包括占位符）属于容器内的原生<input>元素，需要单独针对该元素设置样式。可以通过Dash Table的css参数精准定位筛选框元素，修改文本和占位符颜色：

修改后的完整代码 #

html.Div([
    dash_table.DataTable(
        id='datatable-interactivity',
        data=df.to_dict('records'),
        editable=False,
        style_filter={
            'backgroundColor': '#252e3f',
            'color': 'white'
        },
        style_header={
            'backgroundColor': '#252e3f',
            'color': 'white'
        },
        style_data={
            'backgroundColor': '#252e3f',
            'color': 'white'
        },
        style_cell={
            'overflow': 'hidden',
            'textOverflow': 'ellipsis',
            'maxWidth': 0
        },
        # 添加css参数控制筛选框文本和占位符颜色
        css=[
            {
                'selector': '.dash-filter input',
                'rule': 'color: white; opacity: 1;'
            },
            {
                'selector': '.dash-filter input::placeholder',
                'rule': 'color: white; opacity: 1;'
            }
        ]
    )
], style={'background-color': '#1f2630'})

关键说明 #

• .dash-filter input 定位到筛选框的输入元素，设置文本为白色并强制opacity:1（默认输入文本带透明度，会导致显示偏灰）
• .dash-filter input::placeholder 专门定位占位符文本，同样设置白色和不透明度，确保占位符清晰显示

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