안녕하세요, MUI 텍스트 필드의 텍스트 레이블 색상을 변경하는 데 문제가 있습니다. 테두리 색상과 호버 상태(레이블 포함)를 성공적으로 사용자 정의했지만 호버가 아닌 상태에서는 레이블 색상을 변경할 수 없습니다. 나는 다른 곳에서 했던 것처럼 DOM(MuiInputBase-input 포함)에서 찾은 다양한 클래스 이름을 시도했지만 성공하지 못했습니다. 나는 또한 inputProps를 시도했지만 아무것도 작동하지 않았습니다. 내 코드는 다음과 같습니다.
{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" }, }} //>
라벨 색상을 변경할 수 있는 방법은 다음과 같습니다.
으아악몇 가지 제안 사항:
DOM에서 생성된 클래스는 변경될 수 있으므로 사용/복사하지 마세요!
.MuiFormLabel-root
사용 가능.css-1sumxir-MuiFormLabel-root
-사용할 수 없음이중 앰퍼샌드는 유효한 구문이 아닙니다
& .MuiFormLabel-root
사용 가능&& .MuiFormLabel-root
사용할 수 없음