材质用户界面如何在FormControlLabel中证明内容合理性

Question

我正在尝试将标签和FormControlLabel组件内的单选按钮对齐，以使标签占用相同的宽度，而不管其中的文本如何。这是当前的样子：

这是我的代码：

<RadioGroup row>

    <FormControl>
      <FormControlLabel
        value={first_column_day}
        control={
          <Radio
            value={first_column_day}
          />
        }
        label={<Typography variant={"subtitle2"}>{first_column_day}</Typography>}
        labelPlacement="start"
      />
    </FormControl>

    <FormControl>
      <FormControlLabel
        value={second_column_day}
        control={
          <Radio
            value={second_column_day}
          />
        }
        label={<Typography variant={"subtitle2"}>{second_column_day}</Typography>}
        labelPlacement="start"
      />
    </FormControl>

</RadioGroup>

我尝试为justifyContent添加FormControl：

<FormControl style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>

我还尝试将Typography包装在div中：

<div><Typography variant={"subtitle2"}>{first_column_day}</Typography></div>

但是这些没有用。到目前为止，唯一有效的方法是像这样向Typography添加固定宽度：

<Typography style={{ width: 75 }} variant={"subtitle2"}>{first_column_day}</Typography>

但是我真的不喜欢这样做，因为它没有反应。将宽度设置为100％也不起作用。

Answer 1

如果您需要在不失去响应性的情况下进行如下对齐，则可以将min-width添加到FormControlLabel组件中-

此处工作沙箱-https://codesandbox.io/s/material-demo-3u8i2?file=/demo.js