React&MUI技术问题：如何用MUI主题调色板颜色填充MUI图标SVG？

直接给图标fill属性传入primary.main这类字符串是无效的，因为浏览器无法识别MUI主题变量，必须通过MUI提供的主题上下文机制来引用颜色。以下是几种可行的实现方式：

方法1：利用SvgIcon自带的color属性 #

所有MUI图标都基于SvgIcon组件，它的color属性支持直接传入主题调色板的键值，组件会自动映射对应颜色：

<LogoutIcon color="primary" />
<LogoutIcon color="secondary" />
<LogoutIcon color="text.primary" />

如果需要使用调色板里的dark/light变体，结合sx属性即可：

<LogoutIcon sx={{ fill: (theme) => theme.palette.primary.dark }} />

方法2：通过useTheme钩子手动获取颜色 #

先通过useTheme获取主题对象，再直接引用调色板中的颜色值赋值给fill：

import { useTheme } from '@mui/material/styles';
import LogoutIcon from '@mui/icons-material/Logout';

function MyComponent() {
  const theme = useTheme();
  
  return (
    <LogoutIcon fill={theme.palette.primary.main} />
  );
}

方法3：用styled组件封装复用样式 #

如果需要重复使用带固定主题颜色的图标，可通过MUI的styled工具创建自定义组件：

import { styled } from '@mui/material/styles';
import LogoutIcon from '@mui/icons-material/Logout';

const PrimaryLogoutIcon = styled(LogoutIcon)(({ theme }) => ({
  fill: theme.palette.primary.main,
}));

// 使用时直接调用
<PrimaryLogoutIcon />

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