单选组始终垂直列在 material-ui 中。有没有办法水平对齐它们?例如,一条水平线上的所有单选按钮。
如何让输入无线电元素在react [material-ui] 中水平对齐?
IT技术
css
reactjs
material-ui
2021-05-18 12:55:54
4个回答
只需使用该row
属性:
<RadioGroup row><Radio /><Radio /></RadioGroup>
RadioGroup
继承自FormGroup
所以FormGroup
组件的属性也可用。
另一个例子,带标签:
<RadioGroup aria-label="anonymous" name="anonymous" value={false} row>
<FormControlLabel value="true" control={<Radio />} label="Yes" />
<FormControlLabel value="false" control={<Radio />} label="No" />
</RadioGroup>
连续渲染单选按钮:
<RadioButtonGroup style={{ display: 'flex' }}>
要根据内容重置大小:
<RadioButton style={{ width: 'auto' }} />
只需在 RadioGroup 控件上添加propsrow={true} 即可。
<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>
对于那些仍在挣扎中的人,请使用以下样式:
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);