Question

我正在构建一个React应用，其中实现了更改全局字体大小的功能。使用材质时，这很容易，因为有包装器可以接收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>

所有这些组件都是材料用户界面

Answer 1

总结一下，多亏了hotpink，所有复选框或复选框组都必须包装在单独的MuiThemeProvider中。我为所有复选框创建了一个名为themeForCheckboxes（：P）的单独const，将其放在负责布局内容和 voila 的mobx存储中，它可以正常工作。 Kinda感到遗憾的是，我们必须以这种方式来做，但是目前没有更好的解决方案。可行且快速。

如何防止更改Material-UI复选框组件的大小

1 个答案: