Material UI LoadingButton加载进度条环绕按钮的异常问题求助

使用Material UI的LoadingButton组件搭配圆形进度指示器时，出现加载进度条环绕按钮旋转的异常情况。

实现代码 #

import SaveIcon from '@mui/icons-material/Save';
import LoadingButton from '@mui/lab/LoadingButton';
import { Typography } from '@mui/material';
import Container from '@mui/material/Container';
import Paper from '@mui/material/Paper';
import * as React from 'react';

export default function SpecialTasksMain(props) {
    return (
        <div style={{ marginTop: '100px' }}>
            <Paper elevation={3} sx={{ minHeight: '600px' }}>
                <Typography variant="h4" component="h2" sx={{ padding: '10px' }}>
                    Special Tasks
                </Typography>
                <Container maxWidth="xxl">
                    <LoadingButton
                        loading
                        loadingPosition="start"
                        startIcon={<SaveIcon />}
                        variant="outlined"
                    >
                        Save
                    </LoadingButton>
                </Container>
            </Paper>
        </div>
    )
}

解决思路 #

• 统一组件版本：这是最常见的触发原因——@mui/lab与@mui/material、@mui/icons-material版本不匹配。执行命令同步所有Material UI相关包的版本：

  npm install @mui/material@latest @mui/lab@latest @mui/icons-material@latest
  # 若使用yarn则执行
  yarn add @mui/material@latest @mui/lab@latest @mui/icons-material@latest
  

• 排查全局样式干扰：检查项目中是否存在全局CSS（如重置样式、自定义全局按钮样式）覆盖了LoadingButton内部元素的定位或动画规则。可通过浏览器开发者工具查看.MuiLoadingButton-loadingIndicator元素的样式，确认是否有意外的transform、animation属性被强制应用。
• 自定义加载指示器：如果默认样式冲突难以排查，直接通过loadingIndicator属性指定自定义的CircularProgress组件，规避默认样式问题：

  import CircularProgress from '@mui/material/CircularProgress';
  
  // ...
  
  <LoadingButton
      loading
      loadingPosition="start"
      startIcon={<SaveIcon />}
      variant="outlined"
      loadingIndicator={<CircularProgress size={20} />}
  >
      Save
  </LoadingButton>
  

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