Problem in Increasing Label in Material-Ui in React - css

Question

I have successfully increased the Label in the TextField of my React app.
My problem is that when its on shrink, it just overlaps some line on its right.
Click Here
import React from "react";
import TextField from "#material-ui/core/TextField";
import { makeStyles } from "#material-ui/core/styles";
const useStyles = makeStyles((theme) => ({
root: {
"& .MuiInputLabel-shrink": {
fontSize: "24px"
}
}
}));
export default function CustomTextField({ InputLabelProps = {}, ...props }) {
const classes = useStyles();
return <TextField {...props} className={classes.root} />;
}

Answer 1

I would encourage you to always use the DevTools when it comes to applying customizations. The size of the gap it determined by the <legend> element:
The element's font size has a font-size: 0.75em to account for the CSS transformation.
So you can simply apply the same font size to its parent:
import React from "react";
import TextField from "#material-ui/core/TextField";
import { makeStyles } from "#material-ui/core/styles";
const useStyles = makeStyles((theme) => ({
root: {
"& .MuiInputLabel-shrink, & fieldset": {
fontSize: "24px"
}
}
}));
export default function CustomTextField({ InputLabelProps = {}, ...props }) {
const classes = useStyles();
return <TextField {...props} className={classes.root} />;
}
https://codesandbox.io/s/material-ui-custom-textfield-composition-forked-g5co7?file=/src/CustomTextField.js

Answer 2

You should use the Shrink as prop for TextField
Remove fontSize: "24px" let it resize by Material-UI
Make sure your TextField as:
<TextField InputLabelProps={{shrink: true}} .../>
if you want to customize the size of the label:
fontSize: 30,
color: "red",
"&$labelFocused": {
color: "purple"
}
},
labelFocused: {}
};
function App({ classes }) {
return (
<div className="App">
<TextField
id="standard-with-placeholder"
label="Your Label"
InputLabelProps={{
classes: {
root: classes.labelRoot,
focused: classes.labelFocused
}