无线电标签被推离无线电

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 example不会发生这种情况。检查html显示标签完全包含在根元素的空间中。我尝试逐字复制代码，结果标签被推开了。

任何人都可以阐明正在发生的事情以及如何解决此问题吗？预先非常感谢。