如何修改Material UI LoadingButton加载状态的文字与背景颜色

你可以通过3种常见方式定位.MuiLoadingButton-root根节点，实现加载态的背景、文字色自定义，不需要额外操作DOM：

首先修正导入语句的正确写法：
import LoadingButton from '@mui/lab/LoadingButton';

方法1：sx 属性单组件配置（新手首选） #

sx是MUI组件内置的样式属性，其中&符号就指代当前组件的.MuiLoadingButton-root根节点。按钮进入加载状态时，根节点会自动追加.MuiLoadingButton-loading状态类名，直接嵌套写对应样式即可：

<LoadingButton
  loading={isSubmitting} // 绑定你的加载状态布尔值
  variant="contained"
  sx={{
    // 非加载态默认样式，不需要修改可以省略
    backgroundColor: '#2563eb',
    color: '#ffffff',
    // 加载态样式
    '&.MuiLoadingButton-loading': {
      backgroundColor: '#f1f5f9', // 自定义加载态背景色
      color: '#94a3b8', // 自定义加载态文字色
      // 可选：同步修改加载转圈的颜色
      '& .MuiCircularProgress-root': {
        color: '#94a3b8'
      }
    }
  }}
>
  提交
</LoadingButton>

方法2：主题全局统一配置 #

如果项目中所有LoadingButton的加载态样式需要统一，直接在MUI主题配置中覆盖根节点默认样式即可，一次配置全项目生效：

import { createTheme, ThemeProvider } from '@mui/material/styles';

const customTheme = createTheme({
  components: {
    MuiLoadingButton: {
      styleOverrides: {
        root: {
          // 此处的root就是官方文档提到的.MuiLoadingButton-root选择器
          '&.MuiLoadingButton-loading': {
            backgroundColor: '#f1f5f9',
            color: '#94a3b8',
            '& .MuiCircularProgress-root': {
              color: '#94a3b8'
            }
          }
        }
      }
    }
  }
});

// 应用根组件包裹ThemeProvider即可生效
function App() {
  return (
    <ThemeProvider theme={customTheme}>
      {/* 你的应用内容 */}
    </ThemeProvider>
  )
}

方法3：独立CSS文件覆盖 #

如果你习惯写独立CSS文件，直接通过类名组合选择器定位根节点即可，建议提高选择器优先级避免被默认样式覆盖：

/* 全局CSS文件 */
.MuiLoadingButton-root.MuiLoadingButton-loading {
  background-color: #f1f5f9 !important;
  color: #94a3b8 !important;
}
/* 同步修改加载指示器颜色 */
.MuiLoadingButton-root.MuiLoadingButton-loading .MuiCircularProgress-root {
  color: '#94a3b8 !important;
}

补充说明：MUI组件的类名生成规则是固定的，根节点统一带.Mui{组件名}-root类名，不同状态会追加对应状态类名，你不需要手动查找DOM，直接按照这个规则写选择器就能精准定位。

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