为何Material UI的shape属性仅影响Button圆角却不作用于Checkbox？

问题根源在于Material UI部分组件（如Checkbox）的圆角并非继承全局shape.borderRadius，而是通过自身样式单独定义，因此全局设置对这类组件无效。以下是实现除单选按钮外所有组件方形的具体方案：

核心思路 #

• 全局设置shape.borderRadius: 0，覆盖大部分默认继承该变量的组件（如Button、Card、TextField等）
• 单独覆盖Checkbox、Switch等拥有独立圆角设置的组件样式，将其圆角设为0
• 不修改Radio组件的样式，保留其原有圆角

代码实现 #

import { createTheme, ThemeProvider } from '@mui/material/styles';
import Button from '@mui/material/Button';
import Checkbox from '@mui/material/Checkbox';
import Radio from '@mui/material/Radio';
import FormControlLabel from '@mui/material/FormControlLabel';
import Switch from '@mui/material/Switch';

const theme = createTheme({
  shape: {
    borderRadius: 0, // 全局生效的方形设置
  },
  components: {
    // 强制Checkbox为方形
    MuiCheckbox: {
      styleOverrides: {
        root: {
          borderRadius: 0,
        },
      },
    },
    // 若需要Switch也为方形，可添加此配置
    MuiSwitch: {
      styleOverrides: {
        root: {
          borderRadius: 0,
        },
        thumb: {
          borderRadius: 0,
        },
      },
    },
    // 其他需要方形的组件（如Chip、Avatar）可按此格式添加
    // MuiChip: {
    //   styleOverrides: {
    //     root: {
    //       borderRadius: 0,
    //     },
    //   },
    // },
  },
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Button variant="contained">Import</Button>
      <Checkbox />
      <Switch />
      <FormControlLabel
        control={<Radio />}
        label="单选按钮（保留默认圆角）"
      />
    </ThemeProvider>
  );
}

export default App;

说明 #

• 全局shape.borderRadius会自动作用于所有依赖该变量的组件，无需逐个修改
• 对于Checkbox、Switch这类硬编码圆角的组件，必须通过components.styleOverrides单独覆盖样式
• Radio组件未做任何样式修改，保持Material UI默认的圆角样式

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