MUI 사용하기

1.[MUI] <Grid> 사용 방법

post-thumbnail

`` 컴포넌트 MUI에서 반응형 레이아웃을 제공하는 컴포넌트로 유연성이 높다. 레이아웃에는 container와 item 두 가지 유형이 있다. `가 최대 12까지 너비라고 생각하고 `의 너비를 정해주면 된다 breakpoint은 xs, sm, md, lg, xl 5가

2024년 9월 5일

2.[Next.js 14, MUI 5] font-family 변경하기

post-thumbnail

MUI에서는 Roboto 글꼴을 기본으로 제공한다Noto Sans KR 글꼴을 사용하기 위해 font face를 설정해줬다.기본적으로 layout.tsx 에서 전역으로 font 설정을 적용하고 있어서처음에는 MUI의 createTheme과 ThemeProvider를 l

2024년 8월 9일

3.[MUI] <Button> 컴포넌트 width 줄이기, hover 시 배경, borderColor 변경

post-thumbnail

정사각형 버튼을 만들고 싶은데 width 조절이 안돼서 찾아보니sx={{ minWidth: 'unset'} 을 사용하여 버튼의 기본 최소 너비를 제거했더니 해결됐다.

2024년 9월 12일

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

post-thumbnail

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

2024년 9월 19일

5.[MUI] <Select> 옵션 선택 시 화면의 스크롤 사라지는 문제 해결

post-thumbnail

&lt;Select> 태그를 이용하는데 옵션 선택 시 화면의 스크롤이 사라지면서화면이 깨지는 문제가 생겼었다검색 해도 다른 스크롤 이슈가 나오고 이 문제에 대한 글을 못찾겠어서클로드에 물어보니 바로 몇가지 해결방법을 알려줬다..그 중 간단하게 해결 가능한 방법은이렇게

2024년 9월 30일