0
355
ViewsRemove inner padding border in Material UI Outlined Text Field
I am using Material UI v5 Outlined TextField component to create a form. As shown in the picture below there is a white padding border coming in the TextField. I have made CSS that input field color changes to yellow on focus.
My code is as follows
// 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",
},
}}
/>
How can I remove this white padding border so that the textfield entire background color is yellow/grey and the font size covers the entire textbox ?
·
Juan Pablo Isaza
1 answers
Answer question0
You can add your padding: 0 into your .MuiOutlinedInput-input style definitions:
export const useStyles = makeStyles({
OutlinedTextField: {
// ... your other styles
"& .MuiOutlinedInput-input": {
backgroundColor: "#F5F5F5 !important",
borderWidth: 0,
outline: "none",
borderColor: "white !important",
padding: 0 // <-- added zero padding instruction
}
}
});
·
Juan Pablo Isaza
Report
Answer question