How to decrease vetical distance between two checkboxes with label?

Question

I used Material-UI for the checkboxes. The default checkbox seems to have a large size for the 'input' tag which is used internally (found after exploring DevTools). I don't seem to find any way to target the 'input' element to resize it to my need. I tried using a negative margin and that' works but I am not satisfied with that. How do I target the 'input' element to resize it according to my need? Here is the code and screenshot.

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;

And here is what it looks like in 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>

Answer 1

You can use the rule name of root instead of input (I don't think input rule name is in the docs for MUI Checkbox). Here on root, you can use box-sizing: border-box so that the padding will also be considered in the computation for its height. Regarding the inner input you have mentioned, it has the CSS property height: 100% so it should respond.

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;