Пользовательский интерфейс материала, как обосновать содержание внутри 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= / демо. js