css - Material UI 如何证明 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>

我尝试为 FormControl 添加 justifyContent:

<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