如何减少带有标签的两个复选框之间的垂直距离？

问题描述

我使用Material-UI作为复选框。内部使用的“ input”标签的默认复选框似乎很大（在探索DevTools之后可以找到）。我似乎找不到任何针对'input'元素来调整其大小以适应我的需要的方法。我尝试使用负边距，这行得通，但我对此并不满意。如何针对'input'元素以根据需要调整其大小？这是代码和屏幕截图。

import React from "react";
import Paper from "@material-ui/core/Paper";
import Grid from "@material-ui/core/Grid";

import CheckBoxWithLabel from "../checkBox-with-label/checkBox-with-label";
import { makeStyles } from "@material-ui/core";

const useStyles = makeStyles({
  filterContainer: {
    width: 218,paddingLeft: 15,},item: {
    height: 20,});

const FilterList = (props) => {
  const { label } = props;
  const classes = useStyles();
  return (
    <Paper elevation={0} className={classes.filterContainer}>
      <Grid container direction="column">
        <Grid item>
          <CheckBoxWithLabel label={label} />
        </Grid>
        <Grid item>
          <CheckBoxWithLabel label={label} />
        </Grid>
        <Grid item>
          <CheckBoxWithLabel label={label} />
        </Grid>
      </Grid>
    </Paper>
  );
};

export default FilterList;

import React from "react";
import { CheckBox as MUICheckBox } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  input: {
    height: 20,});

const CheckBox = () => {
  const classes = useStyles();
  return <MUICheckBox color="primary" classes={{ input: classes.input }} />;
};

export default CheckBox;

import React from "react";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import CheckBox from "@material-ui/core/CheckBox";
import { makeStyles } from "@material-ui/core";

const useStyles = makeStyles({
  label: {
    fontSize: "0.9rem",});

const CheckBoxWthLabel = (props) => {
  const [state,setState] = React.useState(true);
  const classes = useStyles();

  const { label } = props;
  const handleChange = () => {
    setState(!state);
  };
  return (
    <FormControlLabel
      classes={{ label: classes.label }}
      control={
        <CheckBox onChange={handleChange} color="primary" size="small" />
      }
      label={label}
    />
  );
};

export default CheckBoxWthLabel;

这就是DevTools中的样子

<div class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column">
   <div class="MuiGrid-root MuiGrid-item">
      <label class="MuiFormControlLabel-root">
         <span class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-208 MuiCheckBox-root MuiCheckBox-colorPrimary PrivateSwitchBase-checked-209 Mui-checked MuiIconButton-colorPrimary" aria-disabled="false">
            <span class="MuiIconButton-label">
               <input class="PrivateSwitchBase-input-211" type="checkBox" data-indeterminate="false" value="">
               <svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
                  <path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path>
               </svg>
            </span>
            <span class="MuiTouchRipple-root"></span>
         </span>
         <span class="MuiTypography-root MuiFormControlLabel-label makeStyles-label-207 MuiTypography-body1">Daraz</span>
      </label>
   </div>
   <div class="MuiGrid-root MuiGrid-item">
      <label class="MuiFormControlLabel-root">
         <span class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-208 MuiCheckBox-root MuiCheckBox-colorPrimary MuiIconButton-colorPrimary" aria-disabled="false">
            <span class="MuiIconButton-label">
               <input class="PrivateSwitchBase-input-211" type="checkBox" data-indeterminate="false" value="">
               <svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
                  <path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path>
               </svg>
            </span>
            <span class="MuiTouchRipple-root"></span>
         </span>
         <span class="MuiTypography-root MuiFormControlLabel-label makeStyles-label-207 MuiTypography-body1">Daraz</span>
      </label>
   </div>
   <div class="MuiGrid-root MuiGrid-item">
      <label class="MuiFormControlLabel-root">
         <span class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-208 MuiCheckBox-root MuiCheckBox-colorPrimary PrivateSwitchBase-checked-209 Mui-checked MuiIconButton-colorPrimary" aria-disabled="false">
            <span class="MuiIconButton-label">
               <input class="PrivateSwitchBase-input-211" type="checkBox" data-indeterminate="false" value="">
               <svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
                  <path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path>
               </svg>
            </span>
            <span class="MuiTouchRipple-root"></span>
         </span>
         <span class="MuiTypography-root MuiFormControlLabel-label makeStyles-label-207 MuiTypography-body1">Daraz</span>
      </label>
   </div>
</div>

解决方法

您可以使用root而不是input的规则名称（我不认为input规则名称在MUI Checkbox的文档中）。在root上，您可以使用box-sizing: border-box，以便在计算height时也要考虑填充。关于您提到的内部input，它具有CSS属性height: 100%，因此应该响应。

const useStyles = makeStyles({
  input: {
    height: "20px",boxSizing: "border-box" // <-- add this
  }
});

const Checkbox = () => {
  const classes = useStyles();
  return <MUICheckbox color="primary" classes={{ root: classes.input }} />;
};

export default Checkbox;