React类组件中条件样式判断语句应写在哪个标签位置？

你的条件判断逻辑本身没有问题，只需要把样式绑定到包裹row.data.marketD字段的第二个<Grid>标签上即可。不要把样式放到外层Box或者第一个渲染direction的Grid上，否则会把非百分比的文字也一起改色，不符合预期。

注意在MUI组件的sx样式对象中写条件表达式不需要额外包裹大括号，直接写判断逻辑即可，修正后完整代码如下：

<div>
{this.state.tableData.map((row, index)=>{
  return(
    <Box component="span" sx={{}}>
      {/* 渲染方向文本的Grid不需要加颜色样式 */}
      <Grid>{row.data.direction}</Grid>
      {/* 渲染百分比的Grid绑定条件颜色样式 */}
      <Grid sx={{
        color: row.data.marketD < 0 ? 'red' : 'green'
      }}> ({row.data.marketD}%) today </Grid>
    </Box>
  )
})}
</div>

如果你只想让百分比数字本身变色，不需要让括号、today文本跟着变色，可以把数值单独用行内标签包裹后再加样式，参考写法：

<Grid>
  (<span style={{color: row.data.marketD < 0 ? 'red' : 'green'}}>
    {row.data.marketD}%
  </span>) today
</Grid>

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