改變MUI中文字欄位標籤的顏色

Question

嗨，我在更改MUI文字欄位中的文字標籤顏色方面遇到了問題。我已經成功自訂了邊框顏色和懸停狀態（包括標籤），只是在非懸停狀態下無法更改標籤顏色。我嘗試了在DOM中找到的各種類別名稱（包括MuiInputBase-input），就像我在其他地方所做的那樣，但都沒有成功。我還嘗試了inputProps，但也沒有任何效果。以下是我的程式碼：

<TextField
                    className="w-full my-2 "
                    id="outlined-basic"
                    label="Distance (miles)"
                    inputProps={{ sx: {color: '#F1F4F9'} }} <- 這沒有任何效果
                    variant="outlined"
                    onChange={(e) => {setSearchParams({...searchParams, dist: e.target.value})} }
                    sx={{
                        // 對焦時的邊框顏色
                        "&& .Mui-focused .MuiOutlinedInput-notchedOutline": {
                            border: "1px solid #3B82F6",
                        },

                        // 對焦時的標籤顏色
                        "& .css-1sumxir-MuiFormLabel-root-MuiInputLabel-root.Mui-focused": {
                            color: "#3B82F6",
                        },

                        // 正常狀態的邊框顏色
                        "& .MuiOutlinedInput-notchedOutline": {
                            border: "1px solid #F1F4F9",
                        },
                        
                        // 正常狀態的標籤顏色 - <- 沒有任何效果
                        "& .MuiInputBase-root-MuiOutlinedInput-root": {
                            color: "#F1F4F9"
                        },
                    }}
                                         />

Answer 1

這裡是一種可以改變標籤顏色的方法：

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

一些建議：

• 不要使用/複製DOM中產生的類，因為它們可能會改變！
  .MuiFormLabel-root 可以使用
  #.css-1sumxir-MuiFormLabel-root - 不可使用

• 雙與號不是有效的語法
  & .MuiFormLabel-root 可以使用
  && .MuiFormLabel-root 不可使用