Estoy usando el componente Material UI v5 Outlined TextField para crear un formulario. Como se muestra en la imagen a continuación, hay un borde de relleno blanco en el TextField. He hecho CSS que el color del campo de entrada cambia a amarillo en el foco.

mi codigo es el siguiente

 // CSS .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 <TextField {...params} type="text" size="large" variant="outlined" fullWidth className={classes.OutlinedTextField} InputProps={{ ...params.InputProps, classes: { input: "OutlinedTextFieldCSSStyle", }, }} />

¿Cómo puedo eliminar este borde de relleno blanco para que todo el color de fondo del campo de texto sea amarillo/gris y el tamaño de fuente cubra todo el cuadro de texto?