CODEWITHSUNDEEP
reactjsmaterial-ui
Achyut
Achyut

Reputation: 67

Place a component inside label of form control label in material ui

I was working with material ui v5 and while using FormControlLabel, I wanted to display my customized component with some text and a button but I'm not able to add space between text and button.

I tried using justifyContent="space-between" for Box component from "@mui/material/Box" but still no change

enter image description here

This is what I get but i want space between "item" and delete button.

Here is my code:

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 /> */}
    </>
  );
}

Upvotes: 2

Views: 10539

Answers (1)

Dmitriif
Dmitriif

Reputation: 2433

API of Box component doesn't include properties you try to pass. However, it includes SX prop and you can achieve the effect you want by configuring sx property:

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

Upvotes: 1

Related Questions