材料UI将html添加到FormControlLabel

Question

在我的项目中，我需要使用FormControlLabel自定义一个复选框。在这个标签中，我需要用较低的字体大小显示一个项目的名称和代码。我试图将html标记添加到标签或使用排版，但没有成功。代码如下：

<FormControlLabel
label={<Typography variant="subtitle2" style={{ color: 'black', fontSize: '10px' }}>{"name_here" + "<br />(n also not working)" + "code_here"}</Typography>}
control={<Checkbox size="small"/>}
/>

任何关于如何修复的想法都将受到欢迎。非常感谢。

Answer 1

您可以通过在MUI V5的FormControlLabel中使用sx属性来实现这一点。替代方法是使用样式化组件，或者如果您希望全局解决方案使用MUI主题。

下面是使用sx的解决方案，这里是使用的工作代码sanbox

<FormControlLabel
value="top"
sx={{
".MuiFormControlLabel-label": {
fontSize: "10px"
}
}}
control={
<Checkbox
name="test"
value="test"
checked={true}
size="small"
inputProps={{ "aria-label": "controlled" }}
/>
}
label="Top"
labelPlacement="top"
/>

或者，如果你想在标签的侧面呈现Typography组件，你可以像写一样写

label={
<Typography sx={{ fontSize: '10px' }}>
Label Text
</Typography>
}

或在Typography组件中提供您想要的任何属性