Mui技术问题：如何阻止<Tabs>向<ToggleButton>传递特定Props？

问题根源 #

MUI的<Tabs>组件会默认向子级Tab组件传递indicator、selectionFollowsFocus、textColor等内部props，但用<ToggleButton>替代原生Tab时，这些props对ToggleButton无效，且会被传递到DOM元素上，触发React的属性警告。

最优解决方案（Tabs层级一次性处理） #

无需逐个修改45个<ToggleButton>，只需在<Tabs>层级自定义TabComponent，拦截并丢弃不需要的props：

import { Tabs, ToggleButton } from '@mui/material';

// 自定义Tab包装组件，过滤无效props
const ToggleButtonTab = ({ indicator, selectionFollowsFocus, textColor, ...restProps }) => {
  return <ToggleButton {...restProps} />;
};

// 使用时替换Tabs的默认TabComponent
<Tabs TabComponent={ToggleButtonTab}>
  <ToggleButton value="tab1">Tab 1</ToggleButton>
  <ToggleButton value="tab2">Tab 2</ToggleButton>
  {/* 剩余43个ToggleButton直接保留原有写法即可 */}
</Tabs>

方案说明 #

• 自定义的ToggleButtonTab会接收<Tabs>传递的所有props，解构出引发警告的三个属性并忽略，仅将有效props传递给<ToggleButton>
• 这种方式只需要修改一次<Tabs>的配置，所有子级ToggleButton都会自动受益，完全符合在Tabs层级控制的需求

为什么sx prop不适用 #

sx是MUI用于样式定制的prop，仅负责处理元素样式，无法拦截组件之间传递的业务/内部props，因此解决不了这个问题。

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