React Material UI单选按钮看起来混乱

问题描述

我在每一行中创建了多个Radiogroup。每行包含3个FormControlLabel：

import React,{ Component } from 'react'
import FormControl from '@material-ui/core/FormControl';
import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Box from "@material-ui/core/Box";

{/* In class,render method */}
const {values,handleChange} = this.props;

<div>
    <FormControl component="fieldset">
        <RadioGroup row
        aria-label="survey"
        name="survey"
        onChange={handleChange('survey')}
        value={values.survey}
        >
            <FormControlLabel
            value="comedy"
            control={<Radio />}
            label={<div style={{ fontSize: '1.5rem' }}>Comedy</div>} 
            labelPlacement="Comedy"
            />

            <Box mx="4rem" />

            <FormControlLabel
            value="crime"
            control={<Radio />}
            label={<div style={{ fontSize: '1.5rem' }}>Crime</div>} 
            labelPlacement="Crime"
            />

            <Box mx="4rem" />

            <FormControlLabel
            value="drama"
            control={<Radio />}
            label={<div style={{ fontSize: '1.5rem' }}>Drama</div>} 
            labelPlacement="Drama"
            />
        </RadioGroup>
    </FormControl>
</div>

我多次创建了此代码，输出为：

我想逐列订购这些单选按钮。我希望所有按钮都从同一级别开始（对齐）。我该如何实现？

解决方法

我解决了这个问题。我将RadioGroup重新排序为列，总共有3列。所有列元素都从同一级别开始。然后，我将RadioGroup更改为FormGroup，将Radio按钮更改为Checkbox按钮。这是我更改的代码：

<FormControl component="fieldset">
    <FormGroup column
        aria-label="survey"
        name="col1"
        onChange={handleChange('survey')}
        style={{marginRight: '4rem'}}
        value={values.survey}
    >
        <FormControlLabel
            value="absurdist"
            control={<Checkbox/>}
            label={<div style={{ fontSize: '1.5rem' }}>Absurdist</div>}
            labelPlacement="Absurdist"
        />

        <FormControlLabel
            value="action"
            control={<Checkbox />}
            label={<div style={{ fontSize: '1.5rem' }}>Action</div>} 
            labelPlacement="Action"
        />

        <FormControlLabel
            value="adventure"
            control={<Checkbox />}
            label={<div style={{ fontSize: '1.5rem' }}>Adventure</div>} 
            labelPlacement="Adventure"
        />

        <FormControlLabel
            value="comedy"
            control={<Checkbox />}
            label={<div style={{ fontSize: '1.5rem' }}>Comedy</div>} 
            labelPlacement="Comedy"
        />

        <FormControlLabel
            value="crime"
            control={<Checkbox />}
            label={<div style={{ fontSize: '1.5rem' }}>Crime</div>} 
            labelPlacement="Crime"
        />

        <FormControlLabel
            value="drama"
            control={<Checkbox />}
            label={<div style={{ fontSize: '1.5rem' }}>Drama</div>} 
            labelPlacement="Drama"
        />

        <FormControlLabel
            value="fantasy"
            control={<Checkbox />}
            label={<div style={{ fontSize: '1.5rem' }}>Fantasy</div>} 
            labelPlacement="Fantasy"
        />
    </FormGroup>
</FormControl>