React MUI TextField 스타일 적용시키기

다크 모드를 지원하는 사이드 프로젝트를 개발하던 도중, React MUI의 TextField 컴포넌트를 모드에 따라 색상을 달리 설정하여 사용하고자 스타일을 커스터마이징 하는 방법을 알아내 사용하였다.

const InputTextField = styled(TextField)({
  '& label': {
    // placeholder text color
    color: 'var(--sub-text)'
  },
  '& label.Mui-focused': {
    // 해당 input focus 되었을 때 placeholder text color
    // floatng label을 사용할 때 처리 필요하다
    color: 'var(--primary)',
  },
  '& label.Mui-error': {
    color: '#d32f2f',
  },
  '& .MuiOutlinedInput-root': { 
    color: 'var(--text)',
    '& fieldset': {
      borderColor: 'var(--sub-text)',
    },
  },
});

// component
export function page(props) {
  return (
    <div>
      <InputTextField />
    </div>
  );
}

• <TextField /> ui 컴포넌트가 렌더링 된 html을 보면 label로 placeholder가 구현되어 있기 때문에 label에 color를 적용해줘야 했다.
• Input의 기본 border color를 변경해주고 싶었는데 fieldset 태그의 스타일링을 바꿔야하는 것이었다. border-color가 아닌 borderColor라는 정해진 key값에 설정해주어야 하는 것이 포인트.

그 결과 다크 모드에서 아예 색상이 묻혀 죽어있던 인풋이 살아났다!