how to make 3 mui textfields under single border in react js

Question

I want to add dimensions box. i created 3 mui textfields under formGroup and make border radius:0 and changed colour properties still it didn't work. This what i want

I want to make 3 input fields in single border roof with attached autoComplete at the end. autoComplete want to look same as Mui textfield's width and height.

Answer 1

To remove the border of an input you should change it's border-width .
And for the cross signs you can use MUI icons. So you will have a Box with flex display, that has 3 TextFields , 2 Icons and 1 Autocomplete inside. This will be your final code:

import { TextField, Autocomplete, Box } from "@mui/material";
import CloseIcon from "@mui/icons-material/Close";

function Test() {
  return (
    <Box
      sx={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        width: "240px",
        border: "1px solid grey",
        direction: "ltr",
      }}
    >
      <TextField
        size="small"
        sx={{ width: "50px", "& fieldset": { borderWidth: 0 } }}
      />
      <CloseIcon sx={{ fontSize: "10px" }} />
      <TextField
        size="small"
        sx={{ width: "50px", "& fieldset": { borderWidth: 0 } }}
      />
      <CloseIcon sx={{ fontSize: "10px" }} />
      <TextField
        size="small"
        sx={{ width: "50px", "& fieldset": { borderWidth: 0 } }}
      />
      <Autocomplete
        disableClearable
        size="small"
        options={["cm", "inch"]}
        renderInput={(params) => (
          <TextField
            {...params}
            sx={{
              backgroundColor: "#f5f5f5",
              "& fieldset": { borderRadius: 0 },
            }}
          />
        )}
        sx={{ width: "70px" }}
      />
    </Box>
  );
}
export default Test;