How can you adjust the gap space in the TextBox MUI component with custom sized labels?

Question

I am using material ui's (MUI) TextField component and I've increased the font size of the label. As you can see the gap in the border that exists for the label hasn't increased in size to match the now larger label.

I can't find anything in their documents regarding this so I could use some help figuring out how to fix this.

Here's the current CSS ruleset I'm using

const CssTextField = styled(TextField)({
  "& .MuiOutlinedInput-root": {
    "& fieldset": {
      borderColor: "white",
    },
    "&:hover fieldset": {
      borderColor: "white",
    },
    "&.Mui-focused fieldset": {
      borderColor: "#1976D2",
    },
  },
  input: {
    color: "white",
    fontSize: "16px",
  },
  label: {
    color: "white",
    fontSize: "16px",
  },
});

Answer 1

You can add this below style to your css file. This make background for your label that can overlab border

.MuiInputLabel-outlined.MuiInputLabel-shrink {
  background-color: #FFF !important;
}