React中如何基于多个状态条件为文本设置对应颜色样式

方案1：使用状态颜色映射对象（最推荐） #

提前定义一个枚举映射对象，key为status的可选值，value为对应的颜色，后续新增状态只要修改这个映射即可，逻辑清晰易维护。

// 可放在组件外部或单独的常量文件中统一管理
const STATUS_COLOR_MAP = {
  INTRO: 'green',
  BEGINNING: 'blue',
  MIDDLE: 'red',
  END: 'purple',
  CONCLUSION: 'gray'
}

修改遍历渲染逻辑即可：

{rows.map(row => (
  <TableRow key={row.id}>
    <TableCell 
      style={{ color: STATUS_COLOR_MAP[row.status] || '' }} 
      classes={{ root: classes.tableCell }} 
      align="center"
    >
      {row.status}
    </TableCell>
  </TableRow>
))}

如果需要兜底默认值，可以改成STATUS_COLOR_MAP[row.status] ?? 'black'，避免异常status导致样式失效。

方案2：映射完整样式对象（适合多样式规则场景） #

如果后续需要给不同状态加更多样式规则（比如字体粗细、背景色、斜体等），可以直接把映射值改成样式对象：

const STATUS_STYLE_MAP = {
  INTRO: { color: 'green', fontWeight: 500 },
  BEGINNING: { color: 'blue', backgroundColor: '#e3f2fd' },
  MIDDLE: { color: 'red' },
  END: { color: 'purple' },
  CONCLUSION: { color: 'gray', fontStyle: 'italic' }
}

使用时直接传入style属性即可：

<TableCell 
  style={STATUS_STYLE_MAP[row.status] || {}} 
  classes={{ root: classes.tableCell }} 
  align="center"
>

方案3：动态类名方案（适合样式复杂、需复用的场景） #

如果你使用的是Material UI、styled-components等CSS-in-JS方案，可以把样式抽成类名，通过status动态匹配，更符合样式逻辑分离的规范。
以你当前用的Material UI为例：

const useStyles = makeStyles({
  tableCell: {
    // 通用单元格样式
  },
  statusIntro: { color: 'green' },
  statusBeginning: { color: 'blue' },
  statusMiddle: { color: 'red' },
  statusEnd: { color: 'purple' },
  statusConclusion: { color: 'gray' }
})

封装类名匹配方法：

const classes = useStyles()
const getStatusClass = (status) => {
  const classMap = {
    INTRO: classes.statusIntro,
    BEGINNING: classes.statusBeginning,
    MIDDLE: classes.statusMiddle,
    END: classes.statusEnd,
    CONCLUSION: classes.statusConclusion
  }
  return classMap[status] || ''
}

渲染时传入即可：

<TableCell 
  classes={{ root: `${classes.tableCell} ${getStatusClass(row.status)}` }} 
  align="center"
>

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