Reactjs 如何制作更小的单选按钮

我找不到一种方法在MaterialUI中创建一组三个小的（19px高）标签单选按钮。我正在将一个浏览器应用程序从静态HTML/JS迁移到material ui/react，我需要该组保持不变大小

我开始使用的按钮组有三个垂直对齐的小单选按钮。这是 截图：

以下是我使用material ui文档所能做到的最好的代码：

<FormControl
  margin="dense"
  size="small"
>
  <RadioGroup
    size="small" 
    name="dataSource"
    value={dataSource}
    onChange={handleDataSourceChange}
  >
    <FormControlLabel
      value="CaseCount"
      control={
        <Radio
          className={classes.radio}
          size="small" 
        />
      } 
      label="Cases"
    />
    <FormControlLabel
      value="DeathCount"
      control={
        <Radio
          className={classes.radio}
          size="small" 
        />
      } 
      label="Deaths"
    />
    <FormControlLabel
      value="HotSpots"
      control={
        <Radio
          size="small" 
        />
      } 
      label="HotSpot warning"
    />
  </RadioGroup>
</FormControl>

这将导致一个过大的组--按钮图标太大，文本太大，每行高38像素（是原始的19像素的两倍）。以下是材质ui对应项的屏幕截图：

我想我希望结果使用普通的html输入（类型为

radio

），而不是svg图标，以及字体高度为

13px

的字体。如何在材质ui中实现这一点

我知道如何修理左边的垫子，所以我不担心。如何获得19px高而不是38px高的行？

原因 如果您检查Material单选按钮，我们可以看到单选按钮的填充导致每行的高度为38px

代码 因此，我们可以使用以下代码简单地删除所有单选按钮的垂直填充（请注意，我的代码与您的代码略有不同）：

类似地，根据，我们可以使用

标签

类名对文本标签应用自定义样式。因此，我们首先在

makeStyles（）

函数中定义

label

的样式对象。接下来，我们通过添加

classes={{label:classes.label}

的属性，将样式应用于

FormControlLabel

组件：

<Radio size="small" classes={{root: classes.root}} />

<FormControlLabel classes={{label: classes.label}} /* ... */ />

---

这太棒了，正是我想要的。谢谢

<FormControlLabel classes={{label: classes.label}} /* ... */ />