Struggling to customize the Textfield from the global theme? Can't seem to achieve a colored background for the input only (white) without obscuring the label when it moves inside the input.
Desired result : https://i.sstatic.net/us2G7.png
Current outcome : https://i.sstatic.net/So3LS.png Tried using white background with transparency to show text behind it, but removing transparency completely hides the label behind the white background as shown here: https://i.sstatic.net/9biAT.png
Below is the snippet from my theme :
export const testGlobal = createMuiTheme({
palette: {
common: {
black: "#000",
white: "rgba(255, 255, 255, 1)",
blue: {
light: "rgba(184, 244, 255, 1)",
default: "rgba(0, 219, 255, 1)",
dark: "rgba(0, 184, 213, 1)",
},
red: {
light: "#ff1744",
default: "#fd0031",
dark: "#e3002c",
},
orange: {
light: "#ffc046",
default: "#ff8f00",
dark: "#c56000",
},
grey: {
light: "rgba(99, 99, 99, 1)",
medium: "rgba(99, 99, 99, 1)",
paper: "rgba(65, 65, 65, 1)",
default: "rgba(99, 99, 99, 1)",
dark: "rgba(60, 60, 60, 1)",
},
},
},
});
testGlobal.root = {
borderColor: "rgba(85, 85, 85, 1)",
};
testGlobal.img = {
width: "79%",
};
testGlobal.palette = {
...testGlobal.palette,
vumeter: {
top: "#fd0031",
mid: "#ff8f00",
bottom: "rgba(0, 219, 255, 1)",
},
playlist: {
playing: "#ef5350",
},
background: {
light: "rgba(99, 99, 99, 1)",
medium: "rgba(99, 99, 99, 1)",
paper: "rgba(65, 65, 65, 1)",
default: "rgba(99, 99, 99, 1)",
dark: "rgba(60, 60, 60, 1)",
},
primary: {
light: "rgba(184, 244, 255, 1)",
main: "rgba(0, 219, 255, 1)",
dark: "rgba(0, 184, 213, 1)",
contrastText: "rgba(255, 255, 255, 1)",
},
text: {
primary: "rgba(255, 255, 255, 0.87)",
secondary: "rgba(255, 255, 255, 0.54)",
disabled: "rgba(255, 255, 255, 0.38)",
hint: "rgba(255, 255, 255, 0.38)",
},
};
testGlobal.overrides = {
MuiFormLabel: {
root: {
background: "black",
fontWeight: "bolder",
color: "grey",
"&.Mui-focused": { color: "grey" },
paddingLeft: theme.spacing(1),
},
},
MuiInput: {
root: {
fontWeight: "bolder",
background: "white", // the white background that keep hiding my label :(
padding: theme.spacing(1),
color: "black",
},
},
};
testGlobal.props = {
MuiInput: { disableUnderline: true },
};
No additional styling applied to the textfield component
Why does the background cover the label? :(