Material UI sx属性：如何根据条件设置display:none？

你原本的代码目标是实现「仅打印时显示，屏幕上隐藏」，同时通过value和index的关系添加条件判断，但当前写法要么没考虑打印媒体查询，要么可能存在值类型不匹配的问题，以下是两种常见需求场景的正确实现：

场景1：满足条件时屏幕和打印都显示，不满足时仅打印显示 #

如果需求是：当value === index时，屏幕和打印都展示内容；当value !== index时，屏幕隐藏、仅打印时显示。可以这样写：

<Box 
  sx={{
    // 屏幕端的显示逻辑
    display: value === index ? 'block' : 'none',
    // 打印端强制显示
    '@media print': {
      display: 'block'
    }
  }}
>
  Print Only (Hide on screen only)
</Box>

场景2：满足条件时仅打印显示，不满足时完全隐藏 #

如果需求是：只有当value === index时，才在打印时显示（屏幕始终隐藏）；不满足时屏幕和打印都隐藏。写法如下：

<Box 
  sx={{
    // 默认屏幕隐藏
    display: 'none',
    // 打印端根据条件控制显示
    '@media print': {
      display: value === index ? 'block' : 'none'
    }
  }}
>
  Print Only (Hide on screen only)
</Box>

原有写法失效的排查方向 #

如果你的需求只是单纯通过value和index控制显隐（不区分屏幕/打印），那原有写法语法本身是正确的，失效可能是因为：

• value和index类型不匹配（比如一个是字符串、一个是数字），导致严格相等判断!==不成立，可改用非严格相等!=，或者统一类型后再比较（比如Number(value) !== index）。

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