Change color of text field labels in MUI

Question

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:

<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"
                        },
                    }}
                                         />

Answer 1

Here is a way to change the label color:

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

some advices:

• Do not use/copy generated classes in the DOM as they may change!
  .MuiFormLabel-root can be used
  .css-1sumxir-MuiFormLabel-root - Not available

• Double ampersand is not valid syntax
  & .MuiFormLabel-root can be used
  && .MuiFormLabel-root Not available