MUI 관련 정보 - Githubissues

soseuleaf commented 2 years ago

MUI 관련은 따로 작성하겠습니다.

soseuleaf commented 2 years ago

MUI에서 CSS 사용법

MUI에서는 간편하게 CSS를 사용할 수 있습니다.

`

Hello

`

Paper는 MUI에서 제공하는 간단한 배경위에 글을 쓸 수 있는 컴포넌트 입니다. 해당 코드는 다음과 같은 결과를 반환합니다.

CSS가 적용되어 있지 않아 불편한 모습입니다. 여기서 padding과 margin을 적용하고 싶습니다. 다른 방법도 있지만, MUI는 CSS나 styled를 지정하지 않고 해당 컴포넌트에 바로 CSS를 붙여 가독성있고 빠르게 적용 가능합니다.

<Paper sx={{ height: '50vh', padding: '24px', margin: '24px' }}> Hello </Paper>

주목할 곳은 sx입니다. sx라는 파라미터에 중괄호 2번과 CSS와 동일한 값을 주었습니다.

세로 길이를 50vh (뷰포트 높이의 1% 길이와 동일) padding을 24px margin을 24px

깔끔하게 잘 나온 모습을 볼 수 있습니다.

여기서 sx를 통해 주의할 점은 몇 가지의 규칙이 있습니다.

CSS의 값 이름의 '-' 기호가 있다면 사용하지 않습니다. 그리고 그 다음 문제를 대문자로 변환 시킵니다. 예를 들어 text-align은 sx에서 textAlign으로 사용하여야 에러가 발생하지 않습니다.
값이 정수라면 그냥 사용해도 되지만, 문자가 포함될 경우 문자열임을 확인 시켜야 합니다. 예를 들어 padding의 경우 24px가 아닌 px가 들어가 있기 때문에 곧바로 값을 집어넣을 수 없고, '24px'로 적용 시켜야 합니다.

사실 sx는 편하지만 만능은 아닙니다. 재사용이 불편하여 모든 버튼에 같은 값을 넣어주어야 하며 가장 큰 문제는

렌더링 시간이 길다는 단점이 있습니다. 하지만 지금 프로젝트에서 최적화 문제까지 생각하는건 너무 힘들기 때문에 그냥 쓰는 것을 추천드립니다.

추가로 MUI에서 해당 Paper의 props를 살펴보면 sx 항목을 확인할 수 있습니다. sx는 다른 컴포넌트의 대부분도 가지고 있습니다.

soseuleaf commented 2 years ago

MUI 컴포넌트 간단 정리

링크에 들어가면 기능에 대한 예시 코드가 많습니다. 빠르고 간단하게 개발 해 봅시다.

soseuleaf / BoogieRadio