Javascript 如何使材质UI单选按钮浮动：左

^在上面的演示中，您可以看到工作代码，不管怎样，只是尝试水平对齐单选按钮很困难

在Material UI中有没有一种简单的方法可以做到这一点？或者我必须设计自己的单选按钮，我可以在5分钟内完成

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

从“React”导入React；
从“道具类型”导入道具类型；
从“@material ui/core/styles”导入{withStyles}”；
从“@material ui/core/Radio”导入无线电；
从“@material ui/core/RadioGroup”导入射线组；
从“@material ui/core/FormHelperText”导入FormHelperText；
从“@material ui/core/FormControlLabel”导入FormControlLabel；
从“@material ui/core/FormControl”导入FormControl；
从“@material ui/core/FormLabel”导入FormLabel；
常量样式=主题=>({
根目录：{
显示：“flex”
},
表单控制：{
浮动：“左”，
边距：theme.space.unit*3
},
组：{
边距：`${theme.spacing.unit}px 0`
}
});
类RadioButtonsGroup扩展了React.Component{
状态={
价值观：“女性”
};
handleChange=事件=>{
this.setState（{value:event.target.value}）；
};
render（）{
const{classes}=this.props；
返回(
性别
性别
您可以显示一个错误
);
}
}
RadioButtonsGroup.propTypes={
类：PropTypes.object.isRequired
};
导出默认样式（样式）（RadioButtonsGroup）；

我认为在material UI中没有一种“本机”方法可以做到这一点，您必须自己做到这一点。事实上，这是一个更好的办法。

RadioGroup

元素包含单选按钮。如果要在一行中渲染它们，最简单的方法可能是使用flexbox行

您可以在上面的codesandbox中看到我所做的，但只需添加到

组

样式即可：

flexDirection: 'row',

这是因为材质UI已经为组使用flexbox样式。这也是在那里添加

float:'left'

不起作用的原因

您还可以在组上设置

显示：“内联块”

：

display: 'inline-block'

这也可以实现行样式，但控制选项较少。

从“React”导入React；
从“道具类型”导入道具类型；
从“@material ui/core/styles”导入{withStyles}”；
从“@material ui/core/Radio”导入无线电；
从“@material ui/core/RadioGroup”导入射线组；
从“@material ui/core/FormHelperText”导入FormHelperText；
从“@material ui/core/FormControlLabel”导入FormControlLabel；
从“@material ui/core/FormControl”导入FormControl；
从“@material ui/core/FormLabel”导入FormLabel；
常量样式=主题=>({
表单控制：{
显示：“flex”，
浮动：“左”，
边距：theme.space.unit*3
},
组：{
浮动：“左”，
flexDirection:“行”，
边距：`${theme.spacing.unit}px 0`
}
});
类RadioButtonsGroup扩展了React.Component{
状态={
值：“男性1”
};
handleChange=事件=>{
this.setState（{value:event.target.value}）；
};
render（）{
const{classes}=this.props；
返回(
);
}
}
RadioButtonsGroup.propTypes={
类：PropTypes.object.isRequired
};
导出默认样式（样式）（RadioButtonsGroup）；

刚刚找到一种方法，现在就在物料界面上发布？

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 => ({
  formControl: {
    display: "flex",
    float: "left",
    margin: theme.spacing.unit * 3
  },
  group: {
    float: "left",
    flexDirection: "row",
    margin: `${theme.spacing.unit}px 0`
  }
});

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

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

  render() {
    const { classes } = this.props;

    return (
      <div className={classes.root}>
        <RadioGroup
          aria-label="gender"
          name="gender1"
          className={classes.group}
          value={this.state.value}
          onChange={this.handleChange}
        >
          <FormControlLabel value="male 1" control={<Radio />} label="Male 1" />
          <FormControlLabel value="male 2" control={<Radio />} label="Male 2" />
          <FormControlLabel value="male 3" control={<Radio />} label="Male 3" />
        </RadioGroup>

      </div>
    );
  }
}

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

export default withStyles(styles)(RadioButtonsGroup);