MUI에서 텍스트 필드 레이블 색상 변경

Question

안녕하세요, MUI 텍스트 필드의 텍스트 레이블 색상을 변경하는 데 문제가 있습니다. 테두리 색상과 호버 상태(레이블 포함)를 성공적으로 사용자 정의했지만 호버가 아닌 상태에서는 레이블 색상을 변경할 수 없습니다. 나는 다른 곳에서 했던 것처럼 DOM(MuiInputBase-input 포함)에서 찾은 다양한 클래스 이름을 시도했지만 성공하지 못했습니다. 나는 또한 inputProps를 시도했지만 아무것도 작동하지 않았습니다. 내 코드는 다음과 같습니다.

<TextField
                    className="w-full my-2"
                    id="개요-기본"
                    label="거리(마일)"
                    inputProps={{ sx: {color: '#F1F4F9'} }} <- 효과가 없습니다.
                    변형="개요"
                    onChange={(e) => {setSearchParams({...searchParams, dist: e.target.value})} }
                    sx={{
                        // 초점이 맞춰졌을 때 테두리 색상
                        "&& .Mui 중심 .MuiOutlinedInput-notchedOutline": {
                            테두리: "1px 단색 #3B82F6",
                        },

                        // 포커스가 있을 때 라벨 색상
                        "& .css-1sumxir-MuiFormLabel-root-MuiInputLabel-root.Mui-focused": {
                            색상: "#3B82F6",
                        },

                        //정상상태의 테두리 색상
                        ".MuiOutlinedInput-notchedOutline": {
                            테두리: "1px 단색 #F1F4F9",
                        },
                        
                        // 정상 상태의 라벨 색상 - <- 효과가 없습니다.
                        "& .MuiInputBase-root-MuiOutlinedInput-root": {
                            색상: "#F1F4F9"
                        },
                    }}
                                         //>

Answer 1

라벨 색상을 변경할 수 있는 방법은 다음과 같습니다.

으아악

몇 가지 제안 사항:

• DOM에서 생성된 클래스는 변경될 수 있으므로 사용/복사하지 마세요!
  .MuiFormLabel-root 사용 가능
  .css-1sumxir-MuiFormLabel-root - 사용할 수 없음

• 이중 앰퍼샌드는 유효한 구문이 아닙니다
  & .MuiFormLabel-root 사용 가능
  && .MuiFormLabel-root 사용할 수 없음