如何阻止Material-UI Checkbox组件随全局字体大小改变尺寸

我完全懂你遇到的困扰——Material-UI的Checkbox组件确实会紧密关联全局theme里的字体配置，哪怕你尝试了自定义JSS、内联样式都可能被theme的优先级覆盖。针对你使用的v4.7.2版本，这里有几个实用的解决方案：

方案1：精准覆盖Checkbox内部元素样式 #

Checkbox的尺寸本质是由内部SVG图标大小决定的，而这个大小默认会继承全局theme的fontSize。你可以通过嵌套JSS选择器直接固定SVG的宽高，同时调整组件的padding避免布局偏移：

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

const useStyles = makeStyles({
  fixedCheckbox: {
    // 固定组件的内边距，不受字体影响
    padding: 8,
    // 直接定位到内部的SVG图标，强制固定尺寸
    '& svg': {
      width: 24,
      height: 24,
      // 如果需要，还可以固定图标的颜色等其他属性
    },
    // 针对选中状态的SVG，同样强制固定尺寸
    '&$checked': {
      '& svg': {
        width: 24,
        height: 24,
      }
    }
  },
  // 必须定义这个类，才能在JSS中引用Material-UI的内置状态类
  checked: {}
});

// 在组件中使用
const classes = useStyles();

<Checkbox
  checked={severity.checked}
  onChange={this.handleChange(severity.category)}
  value={severity.category}
  color={"default"}
  disabled={!!currentlyActiveScheme && !schemeEditedFlag}
  classes={{ root: classes.fixedCheckbox, checked: classes.checked }}
/>

这种方式直接针对Checkbox的核心视觉元素做硬编码，能彻底切断和全局字体大小的关联。

方案2：用局部ThemeProvider隔离全局样式 #

如果希望更彻底地让Checkbox脱离全局theme的影响，可以给它单独套一个局部的ThemeProvider，使用独立的theme配置：

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

// 创建一个不依赖全局字体的局部theme，这里可以用Material-UI的默认字体配置
const fixedTheme = createMuiTheme({
  typography: {
    fontSize: 16, // 这是Material-UI的默认字体大小，Checkbox会基于此渲染
  }
});

// 用局部ThemeProvider包裹Checkbox
<ThemeProvider theme={fixedTheme}>
  <Checkbox
    checked={severity.checked}
    onChange={this.handleChange(severity.category)}
    value={severity.category}
    color={"default"}
    disabled={!!currentlyActiveScheme && !schemeEditedFlag}
  />
</ThemeProvider>

这个方法相当于给Checkbox开了一个“样式隔离舱”，它的所有样式计算都会基于这个局部theme，完全不受全局字体变化的影响。

为什么之前的方法无效？ #

Material-UI的Checkbox组件在v4版本中，内部SVG图标的大小是通过theme.typography.fontSize动态计算的，普通的root类样式只会影响组件的外层容器，无法覆盖内部SVG的动态样式。只有通过嵌套选择器直接定位到SVG，或者用局部ThemeProvider切断继承，才能真正固定尺寸。

内容的提问来源于stack exchange，提问作者Marek Kamiński