web-dev-qa-db-ja.com

どのようにして入力ラジオ要素をreact [material-ui]で水平方向に整列させることができますか？

ラジオグループは常にmaterial-uiで垂直にリストされます。それらを水平方向に揃える方法はありますか？例えば1つの水平線にすべてのラジオボタン。

cssreactjsmaterial-ui
28
jay.m

rowプロパティを使用するだけです。

<RadioGroup row><Radio /><Radio /></RadioGroup>

RadioGroupはFormGroupを継承するため、FormGroupコンポーネントも使用できます。

20
HydraHatRack

ラジオボタンを連続してレンダリングするには：

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

コンテンツに応じてサイズをリセットするには：

<RadioButton style={{ width: 'auto' }} />
23
lambdakris

まだ苦労している人のために、このスタイルを使用してください：

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

まだコメントはできませんが、@ 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}>
1
noxasaxon

RadioGroupコントロールに小道具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>
1
NuOne