I am currently utilizing the Material UI v5 Outlined TextField component to develop a form. In the image below, you can see a white padding border appearing in the TextField. I have created CSS that changes the input field color to yellow when focused.
This is the code I am using:
// My CSS Styles
.OutlinedTextFieldCSSStyle {
font-size: 13px !important;
padding: 0 !important;
}
// Material-Ui styles
export const useStyles = makeStyles({
OutlinedTextField: {
"& .MuiOutlinedInput-root": {
"& fieldset": {
borderColor: "#949595", // grey color
borderWidth: 1.5,
},
"&:hover fieldset": {
borderColor: "#949595", // grey color
},
"&.Mui-focused fieldset": {
outline: "none",
borderColor: "#949595", // grey color
boxShadow: "0 5px 5px 0px #949595",
},
},
"& .Mui-focused": {
"& .MuiOutlinedInput-input": {
backgroundColor: "#FFFF80 !important", // yellow color
borderColor: "#FFFF80 !important", // yellow color
borderWidth: 0,
outline: "none",
},
},
"& .MuiOutlinedInput-input": {
backgroundColor: "#F5F5F5 !important",
borderWidth: 0,
outline: "none",
borderColor: "white !important",
},
}
});
// TextField Component
<TextField
{...params}
type="text"
size="large"
variant="outlined"
fullWidth
className={classes.OutlinedTextField}
InputProps={{
...params.InputProps,
classes: {
input: "OutlinedTextFieldCSSStyle",
},
}}
/>
https://i.sstatic.net/zh8Ny.png
Is there a way for me to eliminate the white padding border so that the entire background color of the textfield appears as yellow/grey and the font size fills the entire textbox?