<p>Hi, I'm having trouble changing the text label color in a MUI text field. I have successfully customized the border color and hover state (including the label), I just can't change the label color in the non-hover state. I've tried various class names found in the DOM (including MuiInputBase-input), as I've done elsewhere, without success. I also tried inputProps but nothing worked either. Here is my code: </p> <pre class="brush:php;toolbar:false;"><TextField className="w-full my-2" id="outlined-basic" label="Distance (miles)" inputProps={{ sx: {color: '#F1F4F9'} }} <- this has no effect variant="outlined" onChange={(e) => {setSearchParams({...searchParams, dist: e.target.value})} } sx={{ // Border color when focused "&& .Mui-focused .MuiOutlinedInput-notchedOutline": { border: "1px solid #3B82F6", }, // Label color when focused "& .css-1sumxir-MuiFormLabel-root-MuiInputLabel-root.Mui-focused": { color: "#3B82F6", }, //Border color in normal state "& .MuiOutlinedInput-notchedOutline": { border: "1px solid #F1F4F9", }, // Label color in normal state - <- has no effect "& .MuiInputBase-root-MuiOutlinedInput-root": { color: "#F1F4F9" }, }} /></pre>

<TextField
      className="w-full my-2 "
      id="outlined-basic"
      label="距离（英里）"
      InputLabelProps={{
        sx: { color: "red", "&.Mui-focused": { color: "green" } },
      }}
      variant="outlined"
    />