MUI5 Tabs组件问题：隐藏标签页Typography的max-width被设为0

这个问题的核心原因是未激活的TabPanel初始处于不可见状态时，Material-react-table在挂载阶段无法正确计算容器宽度，导致无数据提示文本因宽度不足而垂直排列。第一个Tab因为初始可见，容器宽度计算正常，所以文本显示没问题。

下面提供几种可行的解决方法：

方法1：条件渲染表格组件 #

只在Tab激活时才渲染对应的表格，确保组件挂载时容器处于可见状态，宽度计算正常：

<MDBox sx={{ width: "100%" }}>
  <MDBox sx={{ borderBottom: 1, borderColor: "divider" }}>
    <Tabs
      value={valueTab}
      onChange={handleChange}
      textColor="secondary"
      indicatorColor="secondary"
    >
      <Tab label="Incoming" {...hare0} />
      <Tab label="Outgoing" {...hare1} />
    </Tabs>
  </MDBox>
  <div
    role="tabpanel"
    hidden={valueTab !== 0}
    id="simple-tabpanel-0"
    aria-labelledby="simple-tab-0"
  >
    <MaterialReactTableComponent />
  </div>
  <div
    role="tabpanel"
    hidden={valueTab !== 1}
    id="simple-tabpanel-1"
    aria-labelledby="simple-tab-1"
  >
    {/* 仅当Tab激活时渲染表格 */}
    {valueTab === 1 && <MaterialReactTableComponent />}
  </div>
</MDBox>

方法2：用display属性控制TabPanel显示/隐藏 #

替换原生hidden属性为display样式，避免组件挂载时容器宽度被计算为0：

<MDBox sx={{ width: "100%" }}>
  <MDBox sx={{ borderBottom: 1, borderColor: "divider" }}>
    <Tabs
      value={valueTab}
      onChange={handleChange}
      textColor="secondary"
      indicatorColor="secondary"
    >
      <Tab label="Incoming" {...hare0} />
      <Tab label="Outgoing" {...hare1} />
    </Tabs>
  </MDBox>
  <div
    role="tabpanel"
    style={{ display: valueTab === 0 ? "block" : "none" }}
    id="simple-tabpanel-0"
    aria-labelledby="simple-tab-0"
  >
    <MaterialReactTableComponent />
  </div>
  <div
    role="tabpanel"
    style={{ display: valueTab === 1 ? "block" : "none" }}
    id="simple-tabpanel-1"
    aria-labelledby="simple-tab-1"
  >
    <MaterialReactTableComponent />
  </div>
</MDBox>

方法3：强制表格在Tab激活时重绘布局 #

如果需要保持初始渲染所有表格，可以在表格组件内部监听Tab激活状态，触发布局重计算：

首先修改表格组件，接收isActive属性：

import { useEffect } from "react";
import { useMaterialReactTable } from "material-react-table";

const MaterialReactTableComponent = ({ isActive }) => {
  const table = useMaterialReactTable({
    // 你的表格配置
    columns: [...],
    data: [], // 初始空数据
  });

  useEffect(() => {
    if (isActive) {
      // 触发表格重绘，重新计算布局
      table.resetRowHeights();
      // 如果resetRowHeights无效，可以尝试强制组件重渲染
      // table.setState({ ...table.getState() });
    }
  }, [isActive, table]);

  return <MaterialReactTable table={table} />;
};

然后在TabPanel中传入激活状态：

<MDBox sx={{ width: "100%" }}>
  {/* ...Tabs部分代码不变 */}
  <div
    role="tabpanel"
    hidden={valueTab !== 1}
    id="simple-tabpanel-1"
    aria-labelledby="simple-tab-1"
  >
    <MaterialReactTableComponent isActive={valueTab === 1} />
  </div>
</MDBox>

推荐优先使用方法1或方法2，实现简单且能从根源解决布局计算问题。

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