Hey there! I'm running into a little issue when trying to change the color of the text label in a MUI text field. I've successfully customized the border colors and hover states, including the label, but for some reason, I can't seem to get the label color to change when not in the hover state. I've experimented with different class names (including MuiInputBase-input) that I found in the DOM just like I did with the others, but unfortunately, nothing seems to work. I also gave inputProps a shot, but that didn't have any effect either. Here's the code snippet I'm working with:
<TextField
className="w-full my-2 "
id="outlined-basic"
label="Distance (miles)"
inputProps={{ sx: {color: '#F1F4F9'} }} <- this doesn't do anything
variant="outlined"
onChange={(e) => {setSearchParams({...searchParams, dist: e.target.value})} }
sx={{
// focused border color
"&& .Mui-focused .MuiOutlinedInput-notchedOutline": {
border: "1px solid #3B82F6",
},
// focussed label color
"& .css-1sumxir-MuiFormLabel-root-MuiInputLabel-root.Mui-focused": {
color: "#3B82F6",
},
// normal border color
"& .MuiOutlinedInput-notchedOutline": {
border: "1px solid #F1F4F9",
},
// normal label color - <- DOESN'T DO ANYTHING
"& .MuiInputBase-root-MuiOutlinedInput-root": {
color: "#F1F4F9"
},
}}
/>