Material UI的TableRow组件样式覆盖失效，无法设置行间距

之前配置的TableRow外边距规则完全失效，本质原因是MUI的TableRow默认渲染为table-row语义元素，这类元素本身就不支持外边距属性。不管你把选择器权重提得有多高，浏览器都会直接忽略写在上面的margin设置——这是HTML原生表格布局的底层特性，不是MUI本身的样式优先级问题。

方案1：保留原生表格语义，零侵入实现行间距 #

这是改动最小、对屏幕阅读器等辅助工具最友好的实现方式，完全不需要改动TableRow本身的属性：

• 在外层Table组件上补两个核心样式：
  • 把MUI默认的borderCollapse: collapse改成borderCollapse: separate
  • 加上borderSpacing: 0 8px，这个属性的第二个参数直接控制垂直方向的行间距，第一个参数控制列与列之间的水平间距
• 同步把TableRow默认带的上下边框线去掉，不然间隔位置会露出多余的分割线
• 配置完成后不需要给TableRow单独写任何margin规则，行间隔效果会直接生效

方案2：自定义布局模式，灵活控制行样式 #

如果需要给TableRow加更多个性化样式（比如阴影、圆角、悬浮动效），可以直接脱离原生表格的布局规则：

• 给外层Table组件设置display: block，跳出原生table的布局约束
• 给每个TableRow设置display: flex，此时TableRow就变成了普通的块级Flex容器，上下边距、圆角、阴影这类普通块级元素支持的属性都可以正常生效
• 注意要同步调整TableCell的宽度分配，比如给每个单元格设置flex: 1配合固定的基准宽度，保证多列内容对齐，不会出现布局错位

• 不要直接硬套margin: 8px 0类的规则在TableRow上，只要TableRow还保持默认的table-row display属性，margin设置永远不会被浏览器解析
• 如果是通过全局theme配置覆盖TableRow样式，要确认自定义选择器的权重高于MUI的默认样式，避免写的规则被低优先级的默认样式覆盖
• 用sx属性写内联样式的时候，注意属性名的大小写匹配，比如把marginBottom写成marginbottom这类拼写错误，也会导致样式完全不生效

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