如何在Fluent UI的DetailsList中根据薪资动态为行着色

要实现根据薪资范围动态给行添加红色样式，你需要在onRenderRow回调里对当前行的数据项进行条件判断，再决定是否应用样式。具体修改如下：

核心逻辑说明 #

• 从props中提取当前行对应的item数据
• 判断item.Sal是否满足100 < Sal < 1000的条件
• 根据判断结果动态拼接样式类，同时保留默认行样式（避免覆盖原有组件样式）

完整代码片段 #

<div>
  <DetailsList
    items={this.state.IstateItems}
    columns={[
      { key: "FirstName", name: "First Name", fieldName: "FirstName", minWidth: 150 },
      { key: "lastname", name: "Last Name", fieldName: "lastname", minWidth: 150 },
      { key: "Bdate", name: "Birth Date", fieldName: "Bdate", minWidth: 100 },
      { key: "Sal", name: "Salary", fieldName: "Sal", minWidth: 100 },
      { key: "Manager", name: "Boss", fieldName: "Manager", minWidth: 200 },
    ]}
    onRenderRow={(props, defaultRender) => {
      const { item } = props;
      // 判断薪资是否符合高亮条件
      const shouldHighlight = item.Sal > 100 && item.Sal < 1000;
      // 合并默认样式类和自定义红色样式类
      const rowClassName = shouldHighlight ? `${props.className} ${styles.red}` : props.className;
      
      return defaultRender({ ...props, className: rowClassName });
    }}
  />
</div>

样式补充 #

确保你的styles.red定义了行的高亮样式，比如：

.red {
  background-color: #ffebee; /* 浅红色背景，也可根据需求设置文字颜色 */
}

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