Material UI自定义单选按钮标签组件渲染异常解决方案咨询

我想给特定单选按钮使用自定义组件，但组件无法正确渲染。

我的RadioGroup代码：

const SampleComp = (props : MyProps) => {
    return <RadioGroup
        defaultValue="AllTime"
        name="Filter"
    >
        <FormControlLabel value="AllTime" control={<Radio />} label="All time" />
        <FormControlLabel value="TestLabel" control={<Radio />} label={<TestLabel/>} />
    </RadioGroup>
}

自定义标签组件TestLabel代码：

const TestLabel = () => {
    return  <FormControl fullWidth variant={'outlined'}>
            <InputLabel id="demo-simple-select-label">Long text for label</InputLabel>
            <Select
                labelId="myField"
                id="myField"
                label="Long text for label"
                onChange={handleChange}
            >{[0, 1, 2, 3, 4, 5, 6].map(s => <MenuItem key={s} value={s}>{'value ' + s}</MenuItem>)}
            </Select>
        </FormControl>
}

实际渲染效果：

预期渲染效果：

问题：如何在与单选按钮结合时正确渲染自定义组件？是否有其他实现方式？

方案1：调整自定义组件样式适配FormControlLabel布局 #

FormControlLabel的label区域默认是行内元素且有宽度限制，你给TestLabel里的FormControl加了fullWidth，导致它强制占满父容器宽度，挤压了Radio的显示空间。

修改TestLabel，去掉fullWidth并设置合适宽度，同时调整FormControlLabel的布局：

// 修改TestLabel组件
const TestLabel = () => {
    return  <FormControl variant={'outlined'} style={{ width: 220 }}>
            <InputLabel id="demo-simple-select-label">Long text for label</InputLabel>
            <Select
                labelId="myField"
                id="myField"
                label="Long text for label"
                onChange={handleChange}
            >
              {[0, 1, 2, 3, 4, 5, 6].map(s => <MenuItem key={s} value={s}>{'value ' + s}</MenuItem>)}
            </Select>
        </FormControl>
}

// 使用时调整FormControlLabel样式
<FormControlLabel 
  value="TestLabel" 
  control={<Radio />} 
  label={<TestLabel/>}
  style={{ display: 'flex', alignItems: 'center', gap: 12 }}
/>

方案2：手动构建布局，脱离FormControlLabel限制 #

如果FormControlLabel的默认布局无法满足需求，可自行用Flex容器组合Radio和自定义组件，同时保持与RadioGroup的联动：

const SampleComp = (props : MyProps) => {
    const [selectedValue, setSelectedValue] = useState("AllTime");

    const handleRadioChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        setSelectedValue(event.target.value);
    };

    return <RadioGroup
        value={selectedValue}
        name="Filter"
        onChange={handleRadioChange}
    >
        <FormControlLabel value="AllTime" control={<Radio />} label="All time" />
        {/* 自定义布局项 */}
        <Box display="flex" alignItems="center" gap={2}>
            <Radio 
                value="TestLabel" 
                checked={selectedValue === "TestLabel"}
                onChange={handleRadioChange}
            />
            <TestLabel />
        </Box>
    </RadioGroup>
}

这种方式完全控制排版逻辑，避免FormControlLabel的样式冲突，同时保留RadioGroup的选中状态联动。

方案3：覆盖FormControlLabel默认样式 #

若想继续使用FormControlLabel，可通过自定义类名覆盖默认样式，调整label区域的布局：

import { makeStyles } from '@mui/styles';

const useStyles = makeStyles({
    labelWrapper: {
        flex: 1,
        display: 'flex',
        alignItems: 'center',
    },
});

const SampleComp = (props : MyProps) => {
    const classes = useStyles();
    return <RadioGroup
        defaultValue="AllTime"
        name="Filter"
    >
        <FormControlLabel value="AllTime" control={<Radio />} label="All time" />
        <FormControlLabel 
            value="TestLabel" 
            control={<Radio />} 
            label={<TestLabel/>}
            classes={{ label: classes.labelWrapper }}
        />
    </RadioGroup>
}

同时记得去掉TestLabel中的fullWidth属性，让组件自适应容器宽度。

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