Радиогруппа всегда вертикально указана в материале-ui. Есть ли способ горизонтально выровнять их? например все переключатели в одной горизонтальной линии.
Как я могу получить входные радиоэлементы для горизонтального выравнивания в реакции [material-ui]?
Ответ 1
Чтобы отобразить переключатели в строке:
<RadioButtonGroup style={{ display: 'flex' }}>
В reset размер по содержимому:
<RadioButton style={{ width: 'auto' }} />
Ответ 2
Просто используйте свойство row
:
<RadioGroup row><Radio /><Radio /></RadioGroup>
RadioGroup наследуется от FormGroup, поэтому свойства компонента FormGroup также доступны.
Ответ 3
Для тех, кто все еще борется, используйте этот стиль:
const styles = theme => ({
group: {
width: 'auto',
height: 'auto',
display: 'flex',
flexWrap: 'nowrap',
flexDirection: 'row',
}
});
class MyComponent extends React.Component {
render() {
const { classes } = this.props;
<RadioGroup className={classes.group} ...>
}
};
export default withStyles(styles)(MyComponent);
Ответ 4
Я пока не могу комментировать, но чтобы добавить к тому, что @lambdakris сказал: Вам также может понадобиться добавить flexDirection: 'row'. Самый простой способ сделать эти изменения вместо использования встроенных стилей - это добавить ваш CSS к объекту стилей и классу, которые уже использует material-ui.
const styled = theme => ({
formControl: {
margin: theme.spacing.unit * 3,
width: "100%", //parent of radio group
},
group: {
flexDirection: 'row',
justifyContent: 'space-around',
}
});
...........
<RadioButtonGroup className={classes.group}>
Ответ 5
Просто добавьте prop row = {true} в элемент управления RadioGroup.
<RadioGroup
aria-label="Location"
name="location"
className={classes.group}
value={location}
onChange={handleChange}
row={true}
>
<FormControlLabel value="company" control={<Radio />} label="Company" />
<FormControlLabel value="home" control={<Radio />} label="Home" />
<FormControlLabel value="other" control={<Radio />} label="Other" />
</RadioGroup>