如何让输入无线电元素在react [material-ui] 中水平对齐?

IT技术 css reactjs material-ui
2021-05-18 12:55:54

单选组始终垂直列在 material-ui 中。有没有办法水平对齐它们?例如,一条水平线上的所有单选按钮。

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);