自定义MUI Tab组件包裹后&.Mui-selected样式失效，是否为正常行为？

原因 #

这是MUI的正常行为。MUI的Tabs组件只会给直接子级的原生/自定义Tab组件添加Mui-selected类名。当你用自定义组件（比如TestTab）包裹Styled.Tab时，Tabs会把Mui-selected类加到外层的自定义组件上，而非内部的Styled.Tab元素。这就导致内部Tab拿不到选中类，自定义样式和默认选中样式都无法生效。

解决方法 #

1. 透传所有Props #

让自定义组件直接把所有props传递给内部的Styled.Tab，确保Tabs能识别它为Tab组件：

const TestTab = (props) => {
  return <Styled.Tab {...props} />;
};

2. 转发Ref（可选，若需DOM交互） #

如果自定义组件需要处理ref（比如Tabs的滚动定位），用React.forwardRef转发ref到内部Tab：

const TestTab = React.forwardRef((props, ref) => {
  return <Styled.Tab ref={ref} {...props} />;
});

3. 手动控制选中状态（特殊场景） #

如果自定义组件有额外逻辑，可以手动接收Tabs传递的selected属性，给内部Tab添加类：

const TestTab = ({ selected, ...props }) => {
  return (
    <Styled.Tab 
      {...props} 
      className={`${props.className || ""} ${selected ? "Mui-selected" : ""}`} 
    />
  );
};

总结 #

只要保证自定义组件能正确透传props（和必要的ref）给内部的MUI Tab组件，Tabs就能正常识别并添加选中状态类，你的自定义样式也会生效。

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