如何在Material-UI中让自定义Tab复用Paper组件的深色模式带elevation背景？

我刚好也处理过类似的需求，不用硬编码背景值，完全可以通过MUI的theme和Paper组件的内部逻辑来实现，还能完美适配明暗模式，下面是具体的方案：

方法一：直接复刻Paper的背景计算逻辑 #

Paper组件的elevation背景渐变是基于主题模式和elevation值动态计算的，我们可以直接把这个逻辑搬到自定义Tab的styled样式里，保证和原生Paper的样式完全同步：

import { styled, Tab } from '@mui/material';

const CustomTab = styled(Tab)(({ theme }) => {
  const targetElevation = 1;
  // 完全复用Paper组件的background-image计算逻辑
  const backgroundImage = theme.palette.mode === 'light'
    ? `linear-gradient(rgba(255, 255, 255, ${1 - 0.04 * targetElevation}), rgba(255, 255, 255, ${1 - 0.04 * targetElevation}))`
    : undefined;

  return {
    // 先设置Paper的基础背景色
    backgroundColor: theme.palette.background.paper,
    // 再叠加对应elevation的渐变效果
    backgroundImage,
    // 可根据需求添加其他自定义样式，比如移除默认边框、调整圆角
    border: 'none',
    borderRadius: theme.shape.borderRadius,
  };
});

方法二：封装成工具函数（更适合多组件复用） #

如果你的项目里有多个组件需要复用Paper的elevation背景样式，可以把计算逻辑封装成工具函数，方便多处调用：

import { styled, Tab } from '@mui/material';

// 封装获取Paper指定elevation背景图的工具函数
const getPaperBackgroundImage = (theme, elevation) => {
  // elevation为0或深色模式下不需要渐变背景
  if (elevation === 0 || theme.palette.mode === 'dark') {
    return undefined;
  }
  const opacity = 1 - 0.04 * elevation;
  return `linear-gradient(rgba(255,255,255,${opacity}), rgba(255,255,255,${opacity}))`;
};

// 自定义Tab组件
const CustomTab = styled(Tab)(({ theme }) => ({
  backgroundColor: theme.palette.background.paper,
  backgroundImage: getPaperBackgroundImage(theme, 1),
  // 自定义其他样式
  padding: theme.spacing(2),
  cursor: 'pointer',
}));

为什么不建议硬编码？ #

硬编码具体的渐变值会带来两个明显的问题：

• 一旦MUI调整Paper的elevation计算逻辑，你的自定义组件样式就会和原生Paper脱节
• 无法自动适配明暗模式，还要额外编写主题切换的判断逻辑

而上面的方案完全基于MUI的theme体系和原生Paper的计算逻辑，既能自动跟随主题模式切换，也能长期保持和Paper样式的一致性。

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