如何制作更小的单选按钮

Question

我找不到在 material-ui 中创建一组三个带标签的小（19 像素高）单选按钮的方法。我正在将浏览器应用程序从静态 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 像素的两倍）。这是material-ui对应的截图：

我想我希望结果使用香草 html 输入（类型为 radio）而不是 svg 图标，以及字体高度为 13px 的字体。如何在 material-ui 中做到这一点？

我知道如何修复 padding-left，所以我并不担心。如何获得高 19 像素而不是 38 像素的行？

Answer 1

原因

如果您检查 Material 单选按钮，我们可以看到单选按钮的内边距导致每行的高度为 38px。

代码

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

const useStyles = makeStyles({
  // Applied to <Radio />
  root: {
    width: 19,
    height: 19,
    paddingTop: 0,
    paddingBottom: 0,
  },
  // Applied to <FormControlLabel />
  label: {
    fontSize: 13
  }
});

export default function RadioButtonsGroup() {
  const [value, setValue] = React.useState("CaseCount");
  const classes = useStyles();

  const handleChange = (event) => {
    setValue(event.target.value);
  };

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

  return (
    <FormControl component="fieldset">
      <RadioGroup value={value} onChange={handleChange}>
        <FormControlLabel classes={{label: classes.label}} control={customRadio} value="CaseCount" label="Cases" />
        <FormControlLabel classes={{label: classes.label}} control={customRadio} value="DeathCount" label="Deaths" />
        <FormControlLabel
          classes={{label: classes.label}}
          control={customRadio}
          value="HotSpots"
          label="Hotspot Warning"
        />
      </RadioGroup>
    </FormControl>
  );
}

说明

根据Radio API documentation，我们可以通过overriding styles with classes 使用root 的类名将自定义样式应用于单选按钮的根。因此，我们首先在makeStyles() 函数中定义一个名为root 的样式对象。接下来，我们通过添加 classes={{root: classes.root}} 的 prop 将样式应用到 Radio 组件：

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

同样，根据FormControlLabel API documentation，我们可以使用label 类名将自定义样式应用于文本标签。因此，我们首先在makeStyles()函数中定义label的样式对象。接下来，我们通过添加 classes={{label: classes.label}} 的 prop 将样式应用到 FormControlLabel 组件：

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