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

Question

我在每一行中创建了多个 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>

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

我想逐列排列这些单选按钮。我希望所有按钮都从同一级别开始（对齐）。我怎样才能做到这一点？

Answer 1

我解决了这个问题。我将 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>

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

React Material UI radio buttons look disordered

vertical-alignment

radio-group

radio-button

reactjs

material-ui