如何修改自定义SVG图标颜色以适配Material-UI的Theme Provider主题切换

MUI官方图标内置了主题适配逻辑，会自动读取color属性对应的主题色值，自定义SVG图标默认没有绑定主题变量，所以无法跟随切换。问题核心原因有两个：

1. 你给自定义图标用的是硬编码的行内样式对象iconStyle，无法获取ThemeProvider注入的主题变量
2. 自定义SVG文件内部如果有写死的fill属性，会覆盖外部传入的颜色设置

步骤1：清理SVG文件的硬编码颜色 #

打开你的logo.svg文件，删除所有标签上硬编码的fill属性，或者统一改成fill="currentColor"，让SVG颜色继承父元素的color值。

步骤2：两种方案绑定主题色 #

方案1：封装为MUI标准SvgIcon组件（推荐）

直接用MUI提供的SvgIcon组件包裹你的SVG内容，封装后可以和官方图标完全一样使用color属性适配主题：

import { SvgIcon } from '@mui/material';
// 把你的SVG的path内容拿出来封装
const Logo = (props) => {
  return (
    <SvgIcon {...props} viewBox="0 0 60 60">
      {/* 替换为你logo.svg里的path代码 */}
      <path d="xxx" />
    </SvgIcon>
  )
}

// 使用时和官方图标完全一致
<Logo color='primary' className={classes.icon} />

方案2：直接在makeStyles里绑定主题变量

如果不想修改原有Logo组件结构，把原来的行内样式移到makeStyles里，直接读取主题色值赋值给color或者fill：

const useStyles = makeStyles((theme) => ({
  icon: {
    fontSize: 35,
    '&:hover': {
      backgroundColor: 'transparent',
    },
  },
  // 新增自定义logo的样式
  logo: {
    padding: 2,
    marginTop: 0,
    marginBottom: 0,
    borderRadius: '50%',
    // 直接绑定主题primary色，切换主题自动更新
    color: theme.palette.primary.main,
    '&:hover': {
      color: theme.palette.primary.light,
    },
  }
}));

// 使用时替换行内style为className
<Logo className={classes.logo} width='60' height='60' />

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