48

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

4

6 回答 6

92

只需使用该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>
于 2019-01-12T19:30:56.983 回答
24

要连续呈现单选按钮：

<RadioButtonGroup style={{ display: 'flex' }}>

根据内容重置大小：

<RadioButton style={{ width: 'auto' }} />
于 2016-01-20T17:42:30.517 回答
10

只需在 RadioGroup 控件上添加 prop row={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>
于 2019-05-07T09:29:34.520 回答
6

对于那些还在苦苦挣扎的人，使用这种风格：

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);
于 2018-09-04T02:25:16.140 回答
2

您只需要row在<RadioGroup>. 您可以这样编写代码：

      <FormControl component="fieldset">
        <FormLabel >Lable</FormLabel>
        <RadioGroup aria-label="overall_sal" name="Overall SAL" value={value} onChange={handleChange} row>
          <FormControlLabel value="low" control={<Radio />} label="Low" />
        </RadioGroup>
      </FormControl>
于 2021-02-17T13:16:29.453 回答
0

我还不能发表评论，但要补充一下@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}>
于 2018-05-29T20:34:42.533 回答