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