material-ui - 将material-ui标签定位到左侧并左对齐

Question

我正在使用 material-ui.com 提供的单选按钮组件并设置了 labelPlacement="start" .这已将标签放在左侧，但我也希望标签左对齐，同时将单选按钮留在右侧。

<RadioGroup
    name="switching"
    value="switching"
    onChange={this.handleEstablishingChange.bind(this)}
>
    <FormControlLabel value="switching" control={<Radio />} labelPlacement="start" label={this.props.lang().justswitching} />
    <hr />
    <FormControlLabel value="new_source" control={<Radio />} labelPlacement="start" label={this.props.lang().newsource} />
</RadioGroup>

Answer 1

Problem

在查看 css Material -UI 后添加通过 start在 labelPlacement Prop ，它赋予属性(property)

flex-direction: row-reverse;

所以预计元素从末端(水平)开始。

Solution

它的解决方法是，添加一个属性

justifyContent: 'space-between';

到 labelPlacementStart类(class)。

     <FormControlLabel
        value="new_source"
        control={<Radio />}
        labelPlacement="start"
        label={"World"}
        classes={{
          labelPlacementStart: classes.labelPlacementStart
        }}
      />

    const STYLES = theme => createStyles({
      labelPlacementStart: {
         justifyContent: 'space-between'
      }
    })

Look at this codesandbox