Struggling to customize the appearance of the textField component, particularly with the label when it is minimized:
import * as React from "react";
import TextField from "@mui/material/TextField";
import { createTheme } from "@mui/material/styles";
import createStyled from "@mui/system/createStyled";
import type { TextFieldProps } from "@mui/material/TextField";
const defaultTheme = createTheme({});
const styled = createStyled({ defaultTheme });
const CustomTextField = styled(TextField)<TextFieldProps>(
({ theme, size }) => ({
"& .MuiOutlinedInput-root": {
height: size === "small" ? theme.spacing(5) : theme.spacing(6)
},
"& .MuiInputLabel-root": {
transform: "translate(14px, 8px) scale(1)"
},
"& .MuiInputLabel-shrink": {
transform: "translate(12px, -9px) scale(0.75)",
fontSize: "12px",
fontWeight: 500,
letterSpacing: 0.6,
lineHeight: '20px',
"&.MuiInputLabel-sizeSmall": {
transform: "translate(12px, -9px) scale(0.75)"
}
}
})
);
export default function BasicTextFields() {
return (
<CustomTextField
id="outlined-basic"
label="long"
variant="outlined"
size="medium"
InputLabelProps={{ shrink: true }}
/>
);
}
The issue causing concern is the additional space between the border and the text: https://i.stack.imgur.com/ALeKR.png