如何在 Material UI 中将 Radio 组与 TextField 对齐？答案

【问题标题】：How align Radio group with TextField in Material UI?如何在 Material UI 中将 Radio 组与 TextField 对齐？
【发布时间】：2021-02-15 11:55:59
【问题描述】：

我已阅读文档，但我在 Material UI 中如何使用样式时遇到了困难。

基本上我有以下无线电组组件：

import React from 'react'
import Radio from '@material-ui/core/Radio'
import RadioGroup from '@material-ui/core/RadioGroup'
import FormControlLabel from '@material-ui/core/FormControlLabel'
import FormControl from '@material-ui/core/FormControl'
import FormLabel from '@material-ui/core/FormLabel'

import { makeStyles } from '@material-ui/core/styles'

const useStyles = makeStyles((theme) => ({
    root: {
        '& .MuiFormLabel-root': {
            color: 'red',
        },
    },

    formControl: {
        margin: theme.spacing(3),
    },
}))

const RadioInput = (props) => {
    const classes = useStyles()
    const { label, value, setValue, name, inputs } = props

    return (
        <FormControl component="fieldset" className={classes.root}>
            <FormLabel component="legend">{label}</FormLabel>
            <RadioGroup
                aria-label={name}
                name={name}
                value={value}
                onChange={(e) => setValue(e.target.value)}
                row
            >
                {inputs.map((x, index) => {
                    return (
                        <FormControlLabel
                            key={index}
                            value={x.toLowerCase()}
                            control={<Radio />}
                            label={x}
                        />
                    )
                })}
            </RadioGroup>
        </FormControl>
    )
}

export default RadioInput

现在，我还有一个用于文本字段的组件，如下所示：

import React from 'react'

import { TextField } from '@material-ui/core'

import { makeStyles } from '@material-ui/core/styles'

const useStyles = makeStyles((theme) => ({
    root: {
        '& .MuiTextField-root': {
            margin: theme.spacing(1),
            width: 300,
        },
    },
}))

const TextInput = (props) => {
    const classes = useStyles()
    const { label, value, setValue, error, type, helperText } = props

    return (
        <div className={classes.root}>
            <TextField
                label={label}
                error={!!error ? true : false}
                value={value}
                onChange={(e) => setValue(e.target.value)}
                helperText={!!error ? error : helperText}
                type={type}
            />
        </div>
    )
}

export default TextInput

问题是，将这些放在一起我得到以下丑陋的显示：

如您所见，单选按钮位于上方文本字段的右侧。我想要的是要对齐的标签，以及与标签对齐的单选按钮。

有人可以帮我吗？我花了一些时间查看文档，但没有任何进展。

【问题讨论】：

RadioGroup 的边距为 24px (theme.spacing(3))，TextField 的边距为 8px (theme.spacing(1))。
谢谢@RyanCogswell，知道如何解决这个问题吗？我似乎无法从文档中弄清楚。将theme.spacing(3) 更改为theme.spacing(1) 无效。
请提供code sandbox 重现您的问题。
感谢@RyanCogswell，我在这里创建了它。我似乎已经修复了标签的对齐方式，但单选按钮仍然略微缩进：codesandbox.io/s/young-lake-6he87

标签： css reactjs material-ui textfield

【解决方案1】：

在您的沙盒中，RadioInput.jsx 中有以下内容：

import React from "react";
import Radio from "@material-ui/core/Radio";
import RadioGroup from "@material-ui/core/RadioGroup";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import FormControl from "@material-ui/core/FormControl";
import FormLabel from "@material-ui/core/FormLabel";

import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  root: {
    color: "red",
    margin: theme.spacing(1)
  }
}));

const RadioInput = (props) => {
  const classes = useStyles();
  const { label, value, setValue, name, inputs } = props;

  return (
    <FormControl component="fieldset" className={classes.root}>
      <FormLabel component="legend">{label}</FormLabel>
      <RadioGroup
        className={classes.root}
        aria-label={name}
        name={name}
        value={value}
        onChange={(e) => setValue(e.target.value)}
        row
      >
        {inputs.map((x, index) => {
          return (
            <FormControlLabel
              key={index}
              value={x.toLowerCase()}
              control={<Radio />}
              label={x}
            />
          );
        })}
      </RadioGroup>
    </FormControl>
  );
};

export default RadioInput;

单选组比文本字段及其标签更缩进，因为您在FormControl 和RadioGroup 上都指定className={classes.root}（包括8px 边距），因此RadioGroup 缩进8px比FormControl 的其余内容更进一步。如果您从RadioGroup 中删除className={classes.root}，那么一切都会排成一行：

import React from "react";
import Radio from "@material-ui/core/Radio";
import RadioGroup from "@material-ui/core/RadioGroup";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import FormControl from "@material-ui/core/FormControl";
import FormLabel from "@material-ui/core/FormLabel";

import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  root: {
    color: "red",
    margin: theme.spacing(1)
  }
}));

const RadioInput = (props) => {
  const classes = useStyles();
  const { label, value, setValue, name, inputs } = props;

  return (
    <FormControl component="fieldset" className={classes.root}>
      <FormLabel component="legend">{label}</FormLabel>
      <RadioGroup
        aria-label={name}
        name={name}
        value={value}
        onChange={(e) => setValue(e.target.value)}
        row
      >
        {inputs.map((x, index) => {
          return (
            <FormControlLabel
              key={index}
              value={x.toLowerCase()}
              control={<Radio />}
              label={x}
            />
          );
        })}
      </RadioGroup>
    </FormControl>
  );
};

export default RadioInput;

【讨论】：