如何为Taipy的Status控件多状态设置不同显示颜色？

核心结论 #

不需要给FT1、FT2、FT3设置独立ID，通过CSS属性选择器即可针对不同状态值设置专属颜色。

具体实现步骤 #

1. 编写自定义CSS样式 #

利用Taipy生成的DOM结构，Status控件的每个状态选项会携带data-value属性（对应lov中的键），通过ID+属性选择器精准定位：

/* Recording状态（FT1）- 蓝色 */
#statuslog [data-value="FT1"] {
    background-color: #1E90FF;
    color: #ffffff;
}

/* Recorded状态（FT2）- 绿色 */
#statuslog [data-value="FT2"] {
    background-color: #2ECC71;
    color: #ffffff;
}

/* Failed状态（FT3）- 红色 */
#statuslog [data-value="FT3"] {
    background-color: #E74C3C;
    color: #ffffff;
}

2. 关联CSS文件到Taipy应用 #

在初始化Gui实例时指定CSS文件路径，确保样式生效：

from taipy import Gui

# 原有变量定义
value_tgg = [('TG1', 'Choice 1'), ('TG2', 'Choice 2'), ('TG3', 'Choice 3')]
value_tgg_choice = value_tgg[0]
val_status1 = [('FT1', 'Recording'), ('FT2', 'Recorded'), ('FT3', 'Failed')]
val_status_choice1 = val_status1[0]

page1_md = """
## TESTE

<|{val_status_choice1}|status|lov={val_status1}|id=statuslog|>

<|{value_tgg_choice}|toggle|lov={value_tgg}|on_change={on_value_tgg}|>
"""

def on_value_tgg(state, id, action):
    print(state.value_tgg_choice)
    match state.value_tgg_choice[1]:
        case 'Choice 1':
            state.val_status_choice1 = state.val_status1[1]
            print('1')
        case 'Choice 2':
            state.val_status_choice1 = state.val_status1[2]
            print('2')
        case 'Choice 3':
            state.val_status_choice1 = state.val_status1[0]
            print('3')

# 加载CSS文件并启动应用
Gui(page=page1_md, css_file="custom_status.css").run()

原理说明 #

Taipy渲染Status控件时，会为每个状态选项生成带有data-value属性的DOM节点，属性值对应lov元组的第一个元素（FT1/FT2/FT3）。通过#statuslog [data-value="XXX"]的选择器，可以精准匹配对应状态的元素，实现不同状态的颜色定制。

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