입력 무선 요소를 반응 [material-ui]에서 수평으로 정렬하려면 어떻게 해야 합니까?

입력 무선 요소를 반응 [material-ui]에서 수평으로 정렬하려면 어떻게 해야 합니까?

라디오 그룹은 항상 material-ui에 수직 방향으로 나열되어 있습니다.수평으로 정렬하는 방법이 있습니까? 예를 들어, 모든 라디오 버튼을 한 줄로 수평으로 정렬합니다.

속성만 사용하면 됩니다.

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

RadioGroup 그 때문에, 의 속성을 계승합니다.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 컨트롤에 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>

아직 어려움을 겪고 있는 분들을 위해 다음과 같은 스타일을 사용하세요.

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

넌 그냥 이 말을 하면 돼.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>

아직 코멘트는 할 수 없지만, @lambdakris가 말한 것을 덧붙입니다.flexDirection: 'row'를 추가해야 할 수도 있습니다.인라인 스타일을 사용하는 대신 이러한 변경을 하는 가장 쉬운 방법은 material-ui가 이미 사용하고 있는 스타일 객체와 클래스에 css를 추가하는 것입니다.

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}>

언급URL : https://stackoverflow.com/questions/33680157/how-can-i-get-input-radio-elements-to-horizontally-align-in-react-material-ui