使用三元运算符时React条件样式未生效问题求助

以下是几种可能的原因和对应的解决方法：

1. 类样式覆盖了行内样式 #

检查你定义的classes.row样式，是否存在font-style: normal（尤其是带!important的情况）。类样式如果加了!important会直接覆盖行内样式，此时可以：

• 移除classes.row中font-style的!important声明；
• 改用Material-UI的sx属性替代style，sx的优先级高于普通类样式：

<TableCell size="small" className={classes.row} sx={{ fontStyle: props.itemId === 0 ? "italic" : "inherit" }}>
  {props.itemId === 0 ? "Item Deleted" : props.itemName}
</TableCell>

2. 全局样式重置了<i>标签 #

如果项目全局CSS中重置了<i>标签的样式（比如i { font-style: normal; }），第二种方案的<i>标签就不会生效。可以换成<span>加行内样式，或者使用Material-UI的Typography组件：

{props.itemId === 0 ? 
  <TableCell size="small" className={classes.row}>
    <span style={{ fontStyle: "italic" }}>"Item Deleted"</span>
  </TableCell>
  :
  <TableCell size="small" className={classes.row}>{props.itemName}</TableCell>
}

3. props.itemId类型不匹配 #

确认props.itemId的类型是否为数字：如果itemId是字符串类型（比如"0"），那么props.itemId === 0会返回false，导致样式逻辑不触发。可以改为松散相等或者类型转换：

// 松散相等
props.itemId == 0

// 类型转换后严格相等
Number(props.itemId) === 0

4. 用浏览器调试工具确认样式 #

打开浏览器开发者工具，选中目标TableCell元素，查看样式面板里的font-style属性，看是否被划掉（表示被覆盖），并找到覆盖它的样式来源，针对性修改。

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