使用createMuiTheme配置Material UI Button时出现报错如何解决？

你的配置结构不符合Material UI主题的定义规范：

• createMuiTheme接收的配置对象中，所有组件的自定义样式不能直接放在根层级，必须放在专门的组件配置字段下
• 组件的样式覆盖规则需要写在对应组件的样式子字段内，你当前直接把borderRadius属性放在Button字段下，结构完全错误
• 你写的100%是CSS百分比单位，不加引号会被JS识别为数值1，不符合样式属性值要求

根据你使用的Material UI版本调整即可：

Material UI v4 版本修复代码 #

import { createMuiTheme } from '@material-ui/core/styles';

const btnTheme = createMuiTheme({
  overrides: {
    MuiButton: {
      root: {
        borderRadius: '100%'
      }
    }
  }
});

v4版本使用overrides字段存放全局组件覆盖规则，所有组件名需要加Mui前缀，样式作用到root类才能生效

Material UI v5 及以上版本修复代码 #

import { createTheme } from '@mui/material/styles';
// v5开始createMuiTheme已经重命名为createTheme，旧方法仍兼容但不推荐使用

const btnTheme = createTheme({
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          borderRadius: '100%'
        }
      }
    }
  }
});

v5版本将组件配置字段改为components，样式覆盖字段改为styleOverrides，其余规则和v4一致

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