Material UI Tabs组件首个Tab无法正常显示问题求助

• 你在Tabs组件的直接子节点中混入了非Tab类型的BasicDatePicker组件，Material UI的Tabs默认按直接子元素的索引匹配value，非Tab节点会打乱索引匹配逻辑，导致首个Tab的激活状态判定异常
• 所有Tab未显式声明value属性，依赖默认索引匹配的稳定性极差
• 首个测试Tab未添加你自定义的classes.tab样式，若你在自定义样式中设置了正常的文字颜色，未加样式的首个Tab会使用默认文字样式，容易和背景色重合，出现悬浮可见、移开消失的表现
• 若你state中value的初始值和首个Tab的索引/自定义value不匹配，首个Tab会处于未激活状态，进一步放大样式重合的问题

1. 不要将非Tab组件作为Tabs的直接子节点，BasicDatePicker可移到Tabs组件外平级放置，或放到对应Tab的内容渲染区域
2. 给所有Tab显式设置唯一的value属性，不要依赖默认索引匹配
3. 给所有需要自定义样式的Tab统一添加className={classes.tab}
4. 调整state中value的初始值，和你需要默认激活的Tab的value保持一致

import { useState } from 'react';
import { Tabs, Tab } from '@mui/material';
import { Link } from 'react-router-dom';

// 组件内部逻辑
const YourComponent = (props) => {
  // 初始值对应首个Tab的value，默认激活第一个Tab
  const [value, setValue] = useState(0);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  const refreshPage = () => {
    // 你的刷新逻辑
  };

  return (
    <>
      <Tabs
        value={value}
        onChange={handleChange}
        indicatorColor="primary"
        className={classes.tabContainer}
      >
        <Tab
          className={classes.tab}
          label="Today's Picture"
          value={0}
          component={Link}
          onClick={refreshPage}
          to="/"
        />
        {/* 你可以按需添加更多Tab */}
        <Tab
          className={classes.tab}
          label="其他Tab"
          value={1}
        />
      </Tabs>
      {/* 日期选择器移到Tabs外部 */}
      <BasicDatePicker date={props.date} setDate={props.setDate} />

      {/* Tab对应的内容渲染区域 */}
      {value === 0 && <div>第一个Tab的内容</div>}
      {value === 1 && <div>第二个Tab的内容</div>}
    </>
  );
};

• 打开浏览器开发者工具检查首个Tab的元素样式，确认color、opacity属性是否正常，未和背景色重合
• 确认handleChange执行时value状态更新正常，没有出现值异常的情况

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