时间戳

首页 > 解决方案 > 如何制作更小的单选按钮

reactjs - 如何制作更小的单选按钮

问题描述

我找不到在 material-ui 中创建一组三个小（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 像素的两倍）。这是material-ui对应的屏幕截图：

在此处输入图像描述

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

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

标签： reactjsmaterial-ui

解决方案

原因

如果您检查 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>
  );
}

在 CodeSandbox 上编辑

结果

解释

根据RadioAPI 文档，我们可以将自定义样式应用于单选按钮的根，方法是使用root. root因此，我们首先定义一个在函数中调用的样式对象makeStyles()。接下来，我们通过添加以下属性将样式应用于Radio组件classes={{root: classes.root}}：

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

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

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

推荐阅读