如何防止更改material-ui Checkbox组件的大小答案

【问题标题】：How to prevent changing size of material-ui Checkbox component如何防止更改material-ui Checkbox组件的大小
【发布时间】：2020-04-19 06:14:08
【问题描述】：

我正在构建一个 React 应用程序，其中实现了更改 global font-size。使用材料时这很容易，因为有一个接收theme 对象的包装器。主题对象是通过调用createMuiTheme() 来创建的，这也是由材料提供的。来自 mobx 存储的对象聚集到 createMuiTheme()。一切都很顺利，但是有些组件我希望不受字体大小变化的影响。

虽然我设法为其中几个设置了自定义 JSS 样式，但有一个在硬编码大小时似乎不受任何影响 - 每次我更改全局字体大小时，那些该死的材料 UI 复选框也改变大小。我试过jss，内联样式，类，className...

这里是Checkbox的代码（Checkbox也是来自material-ui） BTW 材质 ui 版本是 "@material-ui/core": "^4.7.2",

          <FormControl className={classes.badgeContainer}>
                <Badge
                    badgeContent={severity.value}
                    classes={{badge: classes[severity.category]}}
                    showZero={true}
                >

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

所有这些组件都是 form material-ui

【问题讨论】：

您是否尝试将!important 添加到字体大小声明中？
该死的，忘记了。很好，去看看有没有用，等一下……
不，不起作用。不过，这是很好的尝试。
无赖。使用nested theme 来包装您的复选框？
那是另一个想法。让我们试试

标签： reactjs material-ui

【解决方案1】：

总而言之，由于 hotpink，所有复选框或复选框组都必须包装在单独的 MuiThemeProvider 中。我为所有复选框创建了一个名为themeForCheckboxes (:P) 的单独常量，将它放在负责布局的 mobx 商店中，瞧，它可以工作。有点难过，我们必须这样做，但目前没有更好的解决方案。可行且快速。

【讨论】：