[MUI] <TextField> disabled 일 때 글자색(color) 선명하게

옹잉·2024년 9월 19일
0

MUI 사용하기

목록 보기
4/5
post-custom-banner

자세히는 못파봤지만
<TextField> 컴포넌트 input 어딘가에 opacity가 적용되어있어서
-webkit-text-fill-color를 설정해주니까 해결됐다.

const theme = createTheme({
  components: {
    MuiTextField: {
      styleOverrides: {
        root: {
          '& .MuiOutlinedInput-root': commonInputStyles,
          '& .MuiOutlinedInput-root.Mui-disabled': {
            '& fieldset': {
              borderColor: '#F2F4F6',
            },
            '& input': {
              borderRadius: '6px',
              backgroundColor: '#F2F4F6',
              WebkitTextFillColor: '#404048', // 이 색상을 바꿔주면 됨
            },
          },
        },
      },
    },
  },
});
profile
틀리더라도 🌸🌈🌷예쁘게 지적해주세요💕❣️
post-custom-banner

0개의 댓글