如何在MUI的createTheme.js中仅修改阴影颜色？

你可以直接复用MUI默认的shadows数组，通过字符串替换快速修改阴影颜色，无需重新定义所有阴影参数，代码量大幅减少：

方案一：保留原透明度，仅修改颜色 #

import { createTheme, shadows } from "@mui/material/styles";

export const theme = createTheme({
  shadows: shadows.map(shadow => 
    shadow === 'none' 
      ? shadow 
      : shadow.replace(/rgba\(0,0,0/g, 'rgba(255, 100, 100') // 替换为你需要的RGB颜色值
  ),
});

方案二：自定义各层级透明度 #

如果需要同时调整不同阴影层的透明度，也可以用更灵活的方式：

import { createTheme, shadows } from "@mui/material/styles";

// 自定义阴影颜色和各层级透明度
const targetColor = "255, 100, 100";
const opacities = [0.08, 0.06, 0.04]; // 对应阴影的三层透明度

const customShadows = shadows.map(shadow => {
  if (shadow === 'none') return shadow;
  // 拆分每个阴影的三层结构，分别替换颜色和透明度
  return shadow.split(',').map((layer, idx) => 
    layer.replace(/rgba\([^)]+\)/, `rgba(${targetColor}, ${opacities[idx]})`)
  ).join(',');
});

export const theme = createTheme({
  shadows: customShadows,
});

方案优势 #

MUI默认的shadows数组已经包含了所有层级的阴影尺寸参数，我们只需要替换其中的颜色部分即可，无需手动维护大量像素值和生成函数，既减少代码量又能保持MUI原有的阴影层级规范。

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