如何在MUI中按屏幕宽度条件样式并恢复默认borderBottom？

你可以通过以下两种简洁方式实现需求：

• 方法一：使用undefined跳过自定义样式
  在sx属性的lg断点中，将borderBottom设置为undefined。这样该断点下不会生成自定义的borderBottom CSS规则，组件会自动恢复使用MUI TableCell的默认borderBottom样式（包括默认的灰色边框颜色）。
  代码示例：

  <TableCell sx={{ borderBottom: { xs: 0, lg: undefined } }}>
      <Typography variant="body2">{account.name} ({account.currency})</Typography>
  </TableCell>
  

• 方法二：直接复用主题默认样式（备选）
  如果undefined在你的场景中不生效，可以通过MUI主题直接引用TableCell的默认borderBottom样式，确保和组件原生样式完全一致：

  <TableCell sx={{ 
      borderBottom: { 
          xs: 0, 
          lg: (theme) => theme.components.TableCell.styleOverrides.root.borderBottom 
      } 
  }}>
      <Typography variant="body2">{account.name} ({account.currency})</Typography>
  </TableCell>
  

原理说明：你之前设置lg: 1时，会生成border-bottom: 1px solid的CSS规则，覆盖了MUI默认的border-bottom: 1px solid rgba(224, 224, 224, 1)。而设置undefined会让该断点下不添加自定义的borderBottom样式，从而保留组件原有的默认样式，无需手动指定颜色。

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