MUI - TextField

Mui의 TextField를 수정하는 방법을 알아보자.

 

Mui의 거의 대부분 컴포넌트의 기존 색들은 Mui의 고유 색인 하늘색을 띤다.

하지만 사이트마다 사용해야 할 색상이 다르기 때문에 수정해야 할 일이 생긴다.

 

그럼 수정하면 된다 라고 생각할 수 있지만 Mui는 이미 우리가 사용하기 좋게 누군가가 코드를 작성해놓은 상태라 생각보다 style 값들을 변경하는 것이 쉽지 않다. Mui를 사용하는 중이라면 이미 알고 있을 것이다.

 

그중에 바꾸기 어려운 요소였던 TextField를 소개하고 내가 수정한 부분까지의 코드를 공개한다.

 

먼저 TextField 그 자체의 상태이다.

번거로움을 피하기 위해 css-in-js인 sx 만을 사용해서 커스텀하겠다.

기존 상태

input 값의 색상도 검정이다.

import { Box, TextField } from '@mui/material';

<Box sx={{ background: 'black', padding: '20px' }}>
	<TextField /> // border의 기본 값은 outline
</Box>

 

먼저 input 값의 색상을 바꿔보자.

 

import { Box, TextField } from '@mui/material';


<Box sx={{ background: 'black', padding: '20px' }}>
	<TextField
    	sx={{
        ' .MuiOutlinedInput-root': {
        	color: 'white',
          },
        }}
    />
</Box>

border가 눈에 안들어온다.

focused prop

TextField의 기존 prop인 focused을 주어 focus 된 상태의 색상으로 바꾸고, 기존 color prop로 secondary를 주었다.

하지만 기본 color prop를 사용하면 mui의 palete에서 지정된 색상을 사용하기 때문에 아무 색상이나 지정할 수 없다. 내가 원하는 색으로 사용하고 싶다면

import { Box, TextField } from '@mui/material';

<TextField
  	color="secondary"
    focused
    sx={{
    	' .MuiOutlinedInput-root': {
    	color: 'white',
    	},
  	}}
/>


// color와 focused 사용안함.
<TextField
	sx={{
    	' .MuiOutlinedInput-root': {
        	color: 'white',
            border: '1px solid red',
         },
    }}
/>

선택적으로 사용할 수 있겠다.

마찬가지로 개발자 도구의 요소 탭을 클릭하여 바꾸고 싶은 요소를 클릭하고 class명의 가장 마지막 클래스의 스타일을 수정한다면 대부분 수정할 수 있을 것이다. 또는 공식문서 참조...

 

 

TextField 컴포넌트에 사용되는 컴포넌트들의 종류다.. 잘 수정해야 원하는 결과가,,

 

참조

https://mui.com/material-ui/react-text-field/

Text field React component - Material UI