앱 디자인에 맞게 Material UI 구성요소를 변경하는 방법 1부

개요

머티리얼 UI 구성요소는 Google의 머티리얼 디자인 가이드라인을 따르도록 설계되었으며 다양한 플랫폼에서 일관되게 보입니다. 그러나 경우에 따라 앱의 디자인과 일치하도록 일부 요소의 색상을 조정하거나 명백한 머티리얼 디자인과 동등한 효과가 없는 효과를 만들고 싶을 수 있습니다. 이러한 경우 어떤 식으로든 구성 요소를 사용자 지정하는 것이 도움이 되는 경우가 많습니다. 이 게시물에서는 머티리얼 UI 구성 요소가 웹 사이트에서 표시되는 방식을 변경하는 몇 가지 일반적인 방법을 살펴보겠습니다.

1부에서는 sx prop에 대해 말씀드리겠습니다. 사실 저는 MUI v5를 많이 사용하지 않아서 V4에서 styled Component를 사용했지만 v5가 나왔을 때 MUI 구성 요소를 변경할 생각은 없었습니다. 그냥 복사하여 붙여넣거나 어딘가에 붙어 있으면 온라인 도움말을 찾습니다.

왜

Styled Components를 계속 사용할 수 있는데 왜 이 모든 것을 배워야 할까요?

1. 컨텍스트 전환은 시간 낭비입니다.

스타일 구성 요소를 정의할 때 정의한 위치에서 사용한 위치로 전환했습니다.

2. 사물의 이름을 짓는 것은 어렵다.

우리 모두는 올바른 선택기 이름을 생각하는 문제를 겪었지만 System Styles를 사용하는 동안에는 그것에 대해 신경 쓸 필요가 없습니다.

sx 소품

sx 소품은 테마에 액세스할 수 있는 사용자 정의 스타일을 정의하기 위한 바로 가기입니다.

구현

sx 소품은 다음과 함께 사용할 수 있습니다.

코어 컴포넌트

상자(div로 렌더링)

맞춤 구성요소

용법

1) 짧은 손 사용하기

m - margin
ml - margin-left
mr - margin-right
mb - margin-bottom
mt - margin-top

The same goes for Padding also - p, pl, pr, pb, pt

<Box
    sx={{
        p:1,  // By default theme spacing is 8px
        mt:2, // So Margin-top will be 16px
        mb:1
    }}

/>

2) 중단점 설정 🥚

<Box
    sx={{
        width:{
            xs:100   // Width at different breakpoints
            sm:200   // equivalent to 200px
            md:300
            lg:400
            xl:500
        },
        p:{
            xs:1  //equivalent to 8px
            md:2 //equivalent to 16px
        }
    }}

/>

보시다시피 Div 소품을 사용하여 다른 중단점에서 sx의 너비를 쉽게 정의할 수 있습니다.
null 값을 사용하여 일부 중단점을 건너뛸 수도 있습니다.

3) 의사 선택기 및 중첩 선택기 사용:

<Box
  sx={{
    ":hover": {       // pseudo Selector
      boxShadow: 6,
    },

        "& .container__title":{  // Nested Selector
             border: 1  //equivalent to 1px solid black 
        }
  }}
>

마지막 생각들

디자인과 관련하여 머티리얼 UI 구성요소를 맞춤설정하는 방법은 많습니다. 기본 제공 옵션을 사용하거나 자신만의 CSS를 추가하거나 스타일을 완전히 재정의할 수도 있습니다. 무엇이 효과가 있는지 알아내는 가장 좋은 방법은 앱에서 가장 잘 보이는 것을 실험하고 확인하는 것입니다. 약간의 노력으로 Material UI를 모든 디자인에 맞게 만들 수 있습니다.

많이 다루지는 않았지만 다음 포스트에서 다루도록 하겠습니다.

제가 틀린 말을 했다면 댓글로 정정해주세요 😊 저도 배우는 중입니다.