Радио-лейблы отталкиваются от радио

Question

Я пытаюсь создать радиогруппу с использованием Material-UI и сталкиваюсь с очень неприятной проблемой: текстовые метки для радиостанций всплывают за пределы радиогруппы.Это приводит к тому, что метки разбиваются на пробелы даже при наличии достаточного места и перекрываются с другими компонентами.

На приложенных снимках экрана группа радиосвязи находится внутри собственной сетки, которая охватывает всю ширину экрана.и имеет md={12}, поэтому можно было бы догадаться, что нет необходимости в разрыве строки, но метка «На строку» все равно ломается независимо, как если бы не было свободного места для полной метки.

Увеличение ширины с помощью width: 500px (например) в FormControl перемещает svg радио в центр пространства, но все еще отодвигает метку дальше, и метки «На ряд» продолжаютперерыв.

Корневой элемент FormControl выделен.Как видите, вокруг svg много горизонтального пространства, и метки разбиваются на пустом месте.

Тот же элемент, сширина увеличена до 500 с помощью стиля.

Ниже приведен код для полного контейнера Grid:

return(
  <Grid container
    direction="row"
  >
    <Grid item
      md={12}
      >
      <FormControl>
        <RadioGroup
          aria-label="Source language"
          name="sourceLangType"
        >
          <FormControlLabel
            control={ <Radio color="primary"/>}
            label="Global"/>
          <FormControlLabel
            control={<Radio color="primary"/>}
            label="Per row" />
        </RadioGroup>
      </FormControl>
    </Grid>
  </Grid>
);

Этого не происходит с примером Material-UI ,Изучение HTML показывает, что метка полностью содержится в пространстве корневого элемента.Я попытался скопировать код дословно, и это привело к удалению меток.

Может кто-нибудь пролить свет на то, что происходит, и как я могу это исправить?Заранее большое спасибо.