如何让Material-UI单选按钮左浮动并实现水平对齐？

嘿，这个问题其实Material-UI早就给咱们准备好了现成的解决方案，不用自己折腾样式哦！

方法一：使用RadioGroup的row属性（最推荐） #

RadioGroup组件自带了row属性，只要把它设为true，就能直接让里面的单选按钮+标签组合水平排列，这是官方推荐的做法，代码改动极小，还能完美适配Material-UI的主题样式。

只需要在你的代码里给RadioGroup标签加上row属性就行，比如：

<RadioGroup
  aria-label="gender"
  name="gender1"
  className={classes.group}
  value={this.state.value}
  onChange={this.handleChange}
  row // 新增这个属性启用水平排列
>

方法二：自定义样式（按需选择） #

如果需要更灵活的布局控制（比如调整按钮间距），也可以通过修改group类的样式实现：

const styles = theme => ({
  // ...其他原有样式
  group: {
    margin: `${theme.spacing.unit}px 0`,
    display: 'flex',
    flexDirection: 'row',
    gap: theme.spacing.unit * 2, // 自定义按钮间的间距
  },
});

这种方式适合个性化布局需求，但优先推荐用row属性，毕竟官方封装好的方案更省心～

修改后的完整代码示例 #

import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import Radio from "@material-ui/core/Radio";
import RadioGroup from "@material-ui/core/RadioGroup";
import FormHelperText from "@material-ui/core/FormHelperText";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import FormControl from "@material-ui/core/FormControl";
import FormLabel from "@material-ui/core/FormLabel";

const styles = theme => ({
  root: { display: "flex" },
  formControl: { float: "left", margin: theme.spacing.unit * 3 },
  group: { margin: `${theme.spacing.unit}px 0` }
});

class RadioButtonsGroup extends React.Component {
  state = { value: "female" };

  handleChange = event => {
    this.setState({ value: event.target.value });
  };

  render() {
    const { classes } = this.props;
    return (
      <div className={classes.root}>
        <FormControl component="fieldset" required className={classes.formControl}>
          <FormLabel component="legend">Gender</FormLabel>
          <RadioGroup
            aria-label="gender"
            name="gender1"
            className={classes.group}
            value={this.state.value}
            onChange={this.handleChange}
            row
          >
            <FormControlLabel value="female" control={<Radio />} label="Female" />
            <FormControlLabel value="male" control={<Radio />} label="Male" />
            <FormControlLabel value="other" control={<Radio />} label="Other" />
            <FormControlLabel value="disabled" disabled control={<Radio />} label="(Disabled option)" />
          </RadioGroup>
        </FormControl>
        <FormControl component="fieldset" required error className={classes.formControl}>
          <FormLabel component="legend">Gender</FormLabel>
          <RadioGroup
            aria-label="gender"
            name="gender2"
            className={classes.group}
            value={this.state.value}
            onChange={this.handleChange}
            row
          >
            <FormControlLabel value="male" control={<Radio color="primary" />} label="Male" />
            <FormControlLabel value="female" control={<Radio color="primary" />} label="Female" />
            <FormControlLabel value="other" control={<Radio color="primary" />} label="Other" />
            <FormControlLabel value="disabled" disabled control={<Radio />} label="(Disabled option)" />
          </RadioGroup>
          <FormHelperText>You can display an error</FormHelperText>
        </FormControl>
      </div>
    );
  }
}

RadioButtonsGroup.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(RadioButtonsGroup);

这样改完，你的单选按钮就会按照预期水平排列啦，比自己写样式高效多了😉

内容的提问来源于stack exchange，提问作者Leon Gaban