@mui/material@5.15.14：TextField的startAdornment中RadioGroup的row属性失效

问题出在InputAdornment的默认样式限制了内部RadioGroup的布局表现，即便设置了row属性，也会因为容器的内联特性导致水平排列不生效。可以通过以下两种方式修复：

方法一：给RadioGroup添加自定义flex布局样式 #

直接在RadioGroup上通过sx属性强制设置水平flex布局，覆盖默认的样式限制：

import * as React from 'react';
import Radio from '@mui/material/Radio';
import RadioGroup from '@mui/material/RadioGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import { InputAdornment, TextField } from '@mui/material';

export default function RadioButtonsGroup() {
  return (
    <TextField
      label="LABEL"
      InputProps={{
        startAdornment: (
          <InputAdornment position="start">
            <RadioGroup
              defaultValue='yes'
              sx={{ display: 'flex', flexDirection: 'row', gap: 2 }} // 强制水平排列并设置间距
            >
              <FormControlLabel
                value="yes"
                control={<Radio />}
                label="Yes"
              />
              <FormControlLabel
                value="no"
                control={<Radio />}
                label="No"
              />
            </RadioGroup>
          </InputAdornment>
        ),
      }}
    />
  );
}

方法二：调整InputAdornment的容器样式 #

给InputAdornment设置display: flex，让内部元素有足够的空间进行水平布局：

import * as React from 'react';
import Radio from '@mui/material/Radio';
import RadioGroup from '@mui/material/RadioGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import { InputAdornment, TextField } from '@mui/material';

export default function RadioButtonsGroup() {
  return (
    <TextField
      label="LABEL"
      InputProps={{
        startAdornment: (
          <InputAdornment 
            position="start"
            sx={{ display: 'flex' }} // 修改容器布局
          >
            <RadioGroup
              defaultValue='yes'
              row
            >
              <FormControlLabel
                value="yes"
                control={<Radio />}
                label="Yes"
              />
              <FormControlLabel
                value="no"
                control={<Radio />}
                label="No"
              />
            </RadioGroup>
          </InputAdornment>
        ),
      }}
    />
  );
}

原因说明 #

InputAdornment默认使用inline-flex布局，宽度会根据内容收缩，导致RadioGroup的row属性无法正常触发水平排列。通过强制设置RadioGroup的flex方向，或者调整InputAdornment的布局方式，就能让单选按钮组正常水平显示。

内容的提问来源于stack exchange，提问作者Yukito Fujita