Material UI按钮切换明暗主题时颜色更新过慢问题求助

核心原因 #

MUI的outlined变体按钮默认样式逻辑中，部分边框、文本颜色的更新依赖主题变量的间接映射，再加上可能的CSS过渡动画叠加，导致明暗主题切换时样式更新滞后。而contained/text变体的样式绑定更直接，响应更快；Drawer内其他按钮大概率没有相同的样式叠加或过渡配置。

可行解决方法 #

1. 强制按钮随主题变化重渲染
   用useTheme钩子监听主题变化，给按钮添加依赖主题的key触发强制重渲染：

   import { useTheme } from '@mui/material/styles';
   
   // 组件内部
   const theme = useTheme();
   
   <Button
     variant="outlined"
     key={`notification-btn-${theme.palette.mode}`}
     // 其他属性
   >
     Enable Notifications
   </Button>
   

2. 自定义OutlinedButton样式，简化主题绑定
   用styled组件重写按钮核心样式，直接绑定主题变量，避免间接映射的延迟：

   import { styled } from '@mui/material/styles';
   import Button from '@mui/material/Button';
   
   const StyledOutlinedButton = styled(Button)(({ theme }) => ({
     borderColor: theme.palette.primary.main,
     color: theme.palette.primary.main,
     '&:hover': {
       borderColor: theme.palette.primary.dark,
     },
     // 只保留必要的过渡，移除颜色相关过渡
     transition: 'box-shadow 0.2s ease-in-out',
   }));
   
   // 使用自定义组件
   <StyledOutlinedButton variant="outlined">
     Enable Notifications
   </StyledOutlinedButton>
   

3. 禁用按钮的颜色过渡动画
   如果是过渡动画导致的视觉延迟，针对性禁用颜色相关过渡：

   <Button
     variant="outlined"
     sx={{
       transition: 'box-shadow 0.2s ease-in-out', // 仅保留非颜色过渡
     }}
   >
     Enable Notifications
   </Button>
   

4. 排查自定义样式冲突
   用浏览器开发者工具检查按钮样式优先级，确认是否有全局CSS或自定义样式覆盖了MUI主题样式，导致主题切换时无法及时更新。确保主题变量绑定的样式优先级最高。

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