Я хочу использовать startAdornment TextField с радиогруппой, но атрибут строки не работает, и группа выстроена вертикально. Интересно, как сделать его горизонтальным?
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'
row // doesn't work, why?
>
<FormControlLabel
value = "yes"
control = {<Radio />}
label = "Yes"
/>
<FormControlLabel
value = "no"
control = {<Radio />}
label = "No"
/>
</RadioGroup>
</InputAdornment>
),
}}
/>
);
}
Я не мог придумать причину, по которой row
prop не работает с RadioGroup
, но следующий код может дать вам желаемый результат
<InputAdornment position = "start">
<RadioGroup
defaultValue='yes'
row // doesn't work, why?
>
<Stack direction = {"row"}>
<FormControlLabel
value = "yes"
control = {<Radio/>}
label = "Yes"
/>
<FormControlLabel
value = "no"
control = {<Radio/>}
label = "No"
/>
</Stack>
</RadioGroup>
Я нашел. Радиогруппа была слишком узкой, и ее необходимо было расширить.
<RadioGroup
defaultValue='yes'
row // it works !
sx = {{
width: 'max-content',
}}
>
Спасибо.
Как сейчас написано, ваш ответ неясен. Пожалуйста, отредактируйте , чтобы добавить дополнительную информацию, которая поможет другим понять, как это относится к заданному вопросу. Более подробную информацию о том, как писать хорошие ответы, вы можете найти в справочном центре.