如何解决如何减少带有标签的两个复选框之间的垂直距离?
我使用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;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。