Material UI中如何根据明暗主题动态切换显示对应按钮图标

你现有代码已经具备完整的主题配置、主题切换状态控制能力，不需要新增额外状态，只需要两步就能实现图标随主题切换的效果：

• 第一步：替换图标导入
  移除原有SettingsIcon的导入语句，引入两个主题对应的功能图标：

  import DarkModeIcon from '@mui/icons-material/DarkMode';
  import LightModeIcon from '@mui/icons-material/LightMode';
  

• 第二步：替换按钮内写死的图标，加条件渲染逻辑
  你当前按钮内固定写了<SettingsIcon/>，直接把这部分替换为基于light状态的条件判断即可：浅色模式（light为true）时显示DarkModeIcon，提示点击可切换深色；深色模式（light为false）时显示LightModeIcon，提示点击可切回浅色。

修改后的按钮完整代码：

<Button 
  onClick={() => setLight((prev) => !prev)} 
  variant="contained" 
  color="primary" 
  sx={{ height: 40 }}
>
  {light ? <DarkModeIcon /> : <LightModeIcon />}
</Button>

可选优化项 #

你可以用useMemo缓存主题实例，避免每次组件重渲染都重复创建主题对象，减少性能损耗，完整的主题绑定参考：

import { useState, useMemo } from 'react';
import { ThemeProvider, createTheme, Button } from '@mui/material';
// 此处放DarkModeIcon、LightModeIcon的导入
// 此处放你已经写好的themeLight、themeDark常量定义

function App() {
  const [light, setLight] = useState(true);
  // 缓存主题，仅当light状态变化时才重新生成主题对象
  const activeTheme = useMemo(() => light ? themeLight : themeDark, [light]);

  return (
    <ThemeProvider theme={activeTheme}>
      {/* 你的业务页面组件写在这里 */}
      {/* 主题切换按钮 */}
      <Button 
        onClick={() => setLight((prev) => !prev)} 
        variant="contained" 
        color="primary" 
        sx={{ height: 40 }}
      >
        {light ? <DarkModeIcon /> : <LightModeIcon />}
      </Button>
    </ThemeProvider>
  )
}

如果你已经完成了ThemeProvider的主题绑定逻辑，只需要修改按钮内部的图标渲染代码即可，你之前编写的两套主题配置不需要做任何改动，可以直接复用。

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