머티리얼 UI를 사용해야 하는 이유

소개

Flatiron School의 3단계 프로젝트를 위해 새로운 CSS 구성 요소 라이브러리를 배우는 데 도전하고 싶었습니다. Material UI에 도달했습니다. 그래픽 디자인 및 마케팅에 대한 배경 지식이 있는 사람으로서 이것이 다른 모든 것보다 두드러진다고 생각하는 이유(그리고 배우기 쉬운 이유)는 다음과 같습니다.

배경
Material UI는 React와 GoogleMaterial Design을 통합하는 CSS 구성요소 라이브러리입니다.

머티리얼 디자인(머티리얼 UI의 기반)을 만드는 Google의 주요 목표는 앱에 액세스할 수 있는 스타일 프레임워크를 구축하는 것이었습니다. 디자인 토큰이라고 하는 것을 활용하여 Google은 앱의 모든 제품과 시스템이 시각적 및 기능적으로 동일한 스토리를 전달할 수 있는 디자인 시스템 스타일을 구축했습니다.

무엇보다 접근성
Material UI의 가장 큰 자산이자 최고의 목표는 접근성입니다. 이것은 무엇을 의미 하는가?

색깔
Material UI는 앱에 대해 액세스 가능한 색상 패키지를 사용자 정의로 생성할 수 있는 color palette tool을 제공합니다.

모두가 앱을 읽을 수 있도록 하려면 색상 대비 대비를 고려하는 것이 필수적입니다. 머티리얼 UI는 과학에 이릅니다. 이러한 색상이 조화를 이루어 사용자를 위한 최고의 시각적 패키지를 만듭니다. 서로를 보완하지 못하는 너무 많은 색상을 사용하려는 유혹은 사라졌습니다.

아이콘
아이콘과 아이콘이 모든 앱의 요구사항이 되어야 하는 이유에 대해 별도의 블로그를 작성할 수 있습니다. 요컨대 아이콘은 다음과 같습니다.

모든 언어의 사용자가 사이트의 요소를 해석할 수 있도록 하는 강력한 도구입니다.

사이트를 정리하고 단어와 문장을 시각적 대기열로 대체하는 강력한 도구입니다.

단어가 지나치게 복잡해지는 사이트에 대한 사용자 흐름 및 탐색을 생성하는 강력한 도구입니다.

머티리얼 UI는 options for icons과 함께 다시 공원 밖으로 나가서 방대한 라이브러리를 제공하여 채우기, 윤곽선 지정, 둥글게 만들기 및 더 많은 아이콘을 손끝에서 몇 초 만에 수행할 수 있습니다.

아이콘은 어떻게 넣나요? 리액트 컴포넌트 상단에 아이콘 이름을 가져온 후 아이콘 이름을 불러서 원하는 위치에 아이콘 이름을 삽입하면 됩니다.

import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';

<div>
 <AddCircleOutline />
</div>

폰트
Material UI의 서명 글꼴은 Roboto 입니다. 깨끗하고 읽을 수 있으며 Google에서 사용합니다. 사이트의 전문적인 요소를 높이고 싶다면 간단하게 유지하고 사용하십시오.

간소화된 룩

성공을 위한 구성 요소

거의 100 pre-built components 를 통해 MUI는 깨끗하고 전문적으로 보이는 앱을 만드는 데 도움이 됩니다.

내가 가장 좋아하는 것은 the button , slider 및 dialog 입니다.

component API에서 이러한 도구를 사용자 정의하는 방법에 대해 자세히 알아볼 수 있습니다(자세한 내용은 아래 참조).

직관적인 디자인
SX 소품
Material UI에서 일회용 구성 요소를 사용자 지정하려는 경우 가장 쉬운 방법은 sx prop 을 사용하는 것입니다. 배우기 쉬운 구문인 sx 소품은 다음과 같이 구성 요소(이 경우 슬라이더)에 직접 연결됩니다.

<Slider
  defaultValue={30}
  sx={{
    width: 300,
    color: 'success.main',
  }}
/>

클래스 이름
기존 CSS를 사용하여 React의 다른 className과 마찬가지로 MUI 구성 요소의 스타일을 지정할 수도 있습니다(여기서 특정 MUI 구성 요소 이름, MenuItem 참조).

.MenuItem {
  color: black;
}

/* Increase the specificity */
.MenuItem.Mui-selected {
  color: blue;
}

<MenuItem selected className="MenuItem">

Material UI를 사용하면 구성 요소를 만들 수도 있습니다global changes.

결론
나는 MUI에 대해 간신히 표면을 긁어봤고 더 많은 것을 배울 수 있어 기쁩니다. 깨끗하고 명확한 문서, 포괄적인 디자인 및 스타일로 인해 가장 강력한 CSS 구성 요소 라이브러리가 됩니다(제 생각에는). 다음 앱에서 사용해 보세요!

자원
Material UI로 시작하려면 멋진getting started page and docs을 따르십시오!