如何实现Material-UI单选按钮标签左置且左对齐，单选按钮居右？

嘿，我刚好处理过类似的布局需求，你已经用了labelPlacement="start"把标签放到左侧，现在要实现标签左对齐、单选按钮靠右，其实调整FormControlLabel的flex布局就能搞定，给你两种实用的方法：

方法一：自定义样式调整Flex对齐 #

Material-UI的FormControlLabel默认是flex布局，我们只需要修改它的justifyContent属性，让元素两端对齐，同时确保它占满父容器宽度：

步骤1：导入样式工具 #

如果是Material-UI v4，使用makeStyles：

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

如果是v5+，可以用styled工具，用法类似。

步骤2：创建自定义样式 #

const useStyles = makeStyles({
  alignedLabel: {
    justifyContent: 'space-between', // 让标签和按钮两端对齐
    width: '100%', // 必须占满父容器宽度，否则space-between不生效
  },
});

步骤3：应用到组件 #

// 函数组件里调用样式
const classes = useStyles();

// 类组件的话可以用withStyles包裹，或者改成函数组件写法
<RadioGroup 
  name="switching" 
  value="switching" 
  onChange={this.handleEstablishingChange.bind(this)}
>
  <FormControlLabel 
    className={classes.alignedLabel}
    value="switching" 
    control={<Radio />} 
    labelPlacement="start" 
    label={this.props.lang().justswitching} 
  />
  <hr />
  <FormControlLabel 
    className={classes.alignedLabel}
    value="new_source" 
    control={<Radio />} 
    labelPlacement="start" 
    label={this.props.lang().newsource} 
  />
</RadioGroup>

方法二：用Grid组件拆分布局 #

如果需要更精细的控制（比如单独调整标签或按钮的间距、样式），可以用Material-UI的Grid组件把标签和按钮分开布局：

import { Grid } from '@material-ui/core';

<RadioGroup 
  name="switching" 
  value="switching" 
  onChange={this.handleEstablishingChange.bind(this)}
>
  <Grid container alignItems="center" spacing={2}>
    <Grid item xs={10} textAlign="left">
      {this.props.lang().justswitching}
    </Grid>
    <Grid item xs={2} textAlign="right">
      <Radio value="switching" name="switching" />
    </Grid>
  </Grid>
  <hr />
  <Grid container alignItems="center" spacing={2}>
    <Grid item xs={10} textAlign="left">
      {this.props.lang().newsource}
    </Grid>
    <Grid item xs={2} textAlign="right">
      <Radio value="new_source" name="switching" />
    </Grid>
  </Grid>
</RadioGroup>

两种方法都能实现你要的效果，第一种更简洁，推荐优先使用~

内容的提问来源于stack exchange，提问作者Ben McCann