열받는 MUI 정리

** 계속해서 업데이트 됩니다.

Tabs / Tab

• height를 조절하려면 min-height와 height 둘 다 줘야 조절됨
• https://github.com/mui/material-ui/issues/5391

Input

• 숫자만 입력 + 숫자 제한
  • type="number" 주면 안됨

inputProps={{
                  inputMode: 'numeric',
                  pattern: '[0-9]*',
                  maxLength: 4,
 			}}

• 숫자 입력으로 제한하려면 onChange에서 한 번 변환해줘야 한다.(열받음)

onChange={(e: ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
          setValue(e.target.value.replace(/\D/g, ''));
        }}

• type="number"를 사용하면 default 0일 때 1로 바꾸면 '01'로 나오는 열받는 상황이 발생한다..

• 숫자 input을 사용할 땐 type="number"를 사용하지 말자

• Decimal(소수) 입력 input을 사용하려면(스택오버플로우)

<TextField
    type="number" // 여기선 type number를 사용해야 한다
    inputProps={{step: "0.1", lang:"en-US"}}
 />

Select

• placeholder
  • placeholder props를 사용해도 동작하지 않는다.
  • 아래와 같이 두 개의 props로 컨트롤 해야 한다.(value가 array 형태라면 join을 사용할 것)
  • https://github.com/mui/material-ui/issues/11069

<Select
      displayEmpty
      renderValue={(v) => (v?.length ? v : `${placeholder}`)}
/>

Textfield

• focus 시 border 스타일을 바꾸려면 border가 아닌 box-shadow를 이용해야 한다.
  • border : 2px solid black 처럼 주면 border height만큼 Textfield height가 변한다.

  &:hover {
    border-color: black;
  }
  &:focus {
    border-color: black;
    box-shadow: 0 0 0 1px black; // box-shadow 사용
  }