在材质ui中的表单控件标签的标签内放置一个组件

Question

我正在使用 Material ui v5，并且在使用 FormControlLabel 时，我想用一些文本和一个按钮来显示我的自定义组件，但我无法在文本和按钮之间添加空格。

我尝试将 justifyContent="space-between" 用于 "@mui/material/Box" 的 Box 组件，但仍然没有变化

这是我得到的，但我希望“项目”和删除按钮之间有空格。

这是我的代码：

import React from "react";
import Checkbox from "@mui/material/Checkbox";
// import FormGroup from "@mui/material/FormGroup";
import FormControlLabel from "@mui/material/FormControlLabel";
import Container from "@mui/material/Container";
import { makeStyles } from "@mui/styles";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";
import Box from "@mui/material/Box";
import IconButton from "@mui/material/IconButton";
import DeleteIcon from "@mui/icons-material/Delete";

const useStyle = makeStyles({
  label: {
    // backgroundColor: "red",
    width: "100%",
    // position: "absolute",
    // right: "10px",
  },
});

export default function TaskItem() {
  const classes = useStyle();
  const Label = (
    <Box
      display="flex"
      justifyContent="space-between"
      alignItems="center"
      className={classes.label}
    >
      <Typography>Item</Typography>
      <IconButton aria-label="delete" size="large">
        <DeleteIcon fontSize="inherit" />
      </IconButton>
    </Box>
  );
  return (
    <>
      <FormControlLabel
        label={Label}
        control={<Checkbox />}
        sx={{ width: "100%" }}
      />
      {/* <Label /> */}
    </>
  );
}

Answer 1

API of Box component 不包括您尝试传递的属性。但是它包含SX prop，你可以通过配置sx属性来达到你想要的效果：

    <Box
      sx={{
        display: 'flex',
        gap: 2
      }}
    >
    ...