React에서 Material UI로 테마 지정

Material UI 테마로 React 앱을 사용자 정의하는 방법 소개

Material UI : 2020 년 우승 한 React UX 라이브러리

Material UI 는 현재 React에서 가장 널리 사용되는 UI 프레임 워크이며 라이브러리는 즉시 사용 가능한 다양한 구성 요소를 제공합니다. 라이브러리는 레이아웃, 탐색, 입력, 피드백 등을위한 구성 요소로 구성됩니다. 머티리얼 UI는 Google이 원래 앞섰지 만 현재 프런트 엔드 개발자 커뮤니티 전체에서 널리 채택되고있는 디자인 언어 인 머티리얼 디자인을 기반으로 합니다.

머티리얼 디자인은 원래 2014 년에 발표되었으며 Google Now 의 이전 카드 기반 디자인을 기반으로 제작되었습니다 . 머티리얼 디자인은 응답 성, 테마, 모바일 우선과 같은 최신 프런트 엔드 개발 표준을 지원하고 매우 맞춤화 할 수 있도록 제작 된 전투 테스트를 거친 디자인 언어입니다.

머티리얼 UI는 머티리얼 디자인이 진화 한 것을 가져와 처음부터 React UX를 구축하는 데 사용할 수있는 React 컴포넌트 라이브러리를 제공합니다. 머티리얼 UI로 무엇을 할 수 있는지 알아보기 위해 머티리얼 UI 스토어 에는 관리자 패널 및 랜딩 페이지 디자인과 같은 일반적인 사용 사례를 충족 하는 다양한 프리미엄 테마가 있습니다.

이 글은 React 프로젝트에서 머티리얼 UI를 도입하는 데 관심이있는 사람들을 위해 머티리얼 UI를 소개하는 역할을하며, 머티리얼 UI 내 테마의 사용자 지정 가능성과 테마에 중점 을 둘 것 입니다.

테마는 신규 사용자를위한 라이브러리 사용을 시작할 때 주요 병목 현상이지만 온라인에서 몇 가지 좋은 도구를 사용하여 더 자세히 다룰 테마 구성을 시작할 수 있습니다. 머티리얼 UI 문서 에는 테마 프로세스를 자세히 설명하는 테마 전용 섹션 도 있습니다 . 그러나이 부분은 주제 및 스타일링 솔루션을 빠르게 설정하기 위해 스 니펫과 함께 주요 개념을 설명하는보다 맞춤화 된 접근 방식으로 작동합니다.

머티리얼 UI 도입을 고려하고 계십니까?

최근에 머티리얼 UI를 접했고 라이브러리에 익숙해지고 궁극적으로 채택하는 데 시간을 할애 할 가치가 있는지 궁금하다면 그렇게하면 큰 이점이있을 수 있습니다. 다음 카테고리에 속한다면 머티리얼 UI가 매우 매력적일 것입니다.

  • 유지 관리에 시간이 많이 걸리는 임시 React 앱을 개발 한 경우 Material UI로 마이그레이션하면 유지 관리가 많이 필요하지 않습니다. 예를 들어 복잡한 입력 유형이 있거나 반응 형 동작을 올바르게 관리 할 수있는 장황한 중단 점 범위가 있거나 테마가 더 복잡해지고 유지 관리가 어려워지는 경우 머티리얼 UI는 이러한 문제를 추상화하여 훨씬 쉽게 만들 수 있습니다. 세련된 API와 각 구성 요소에 제공되는 다양한 유용한 소품을 통해 관리합니다.
  • 프로젝트가 개별적으로 관리되는 프로젝트에서 팀 기반 프로젝트로 이동하고 적합성을 찾고 있다면 Material UI는 팀이 이미 익숙한 엄격한 규칙을 제공하여 프로젝트의 학습 곡선과 온 보딩 프로세스를 줄입니다.
  • 새로운 앱 디자인과 레이아웃의 프로토 타입이 필요한 경우 머티리얼 UI 그리드 시스템은 flexbox 중심의 레이아웃과 반응 형 동작으로 플레이하기에 충분합니다.

자체 테마 구성을 설명서 페이지에 연결하여 라이브 문서에서 어떻게 보이는지 확인할 수도 있습니다. 이 섹션방문 하여 문서의 실시간 미리보기를 위해 기본 및 보조 색상을 선택하십시오. 다음 섹션에서 테마에 대해 더 자세히 알아볼 것입니다.

설치 및 설정

머티리얼 UI를 시작하는 것은 매우 간단하며 core모듈을 프로젝트에 설치 하기 만하면됩니다 . core모듈 과 함께 icons구성 요소에 SVG 아이콘을 매우 ​​간단하게 가져오고 포함 할 수있는 Material UI의 패키지를 설치하는 것이 좋습니다 . yarn을 사용하여 패키지를 설치하십시오.

yarn add @material-ui/core @material-ui/icons

import { Grid } from '@material-ui/core' // ok
import Grid from '@material-ui/core/Grid' // also ok

import { Button, Divider Grid, Typography } from '@material-ui/core'

아이콘을 쉽게 가져오고 포함 할 수도 있습니다.

// embedding material ui icons 
import AccessAlarmIcon from '@material-ui/icons/AccessAlarm'
const AlarmComponent = () => 
  <AccessAlarmIcon />

Material UI는 IconSVG 및 Font Awesome을 포함한 다양한 외부 라이브러리를 처리하도록 설계된 구성 요소를 제공하지만 개발의 용이성을 추가 material-ui/icons하려면 개발자의 첫 번째 호출 포트 여야합니다. 아이콘 구성 요소가 외부 라이브러리를 지원하는 방법을 알아 보려면 아이콘 데모 를 확인하십시오 .

이 설정을 염두에두고 이제 머티리얼 UI 구성 요소를 가져 와서 앱에 임베드 할 수 있습니다.하지만 React 앱이 다른 Google 웹 사이트처럼 느껴지는 것을 원하지 않을 가능성이 높습니다! 여기서 테마가 중요해집니다. 머티리얼 UI는 완전히 사용자 정의 할 수 있습니다 disableRipple. 소품으로 버튼을 클릭 할 때 상표 파급 효과를 비활성화 할 수도 있습니다 .

다음 섹션에서는 Material UI가 제공하는 테마 솔루션을 살펴보고 설정 프로세스를 안내합니다.

주요 머티리얼 UI 구성 요소와 함께 문서는 Accordion 구성 요소 부터 시작하여 모든 소품 및 지원되는 값과 함께 머티리얼 UI 라이브러리에서 사용되는 모든 구성 요소를 참조 하는 구성 요소 API 섹션 도 제공합니다 . 독자는이 섹션을 숙지하여 구성 요소의 기능을 완전히 파악하고 개발 중 특정 사용 사례에 유용 할 수있는 다른 유틸리티 구성 요소를 발견하는 것이 좋습니다.

머티리얼 UI의 테마

이제 앱에서 테마를 빠르게 설정해 보겠습니다. 이전 조각에서 논의한 맞춤형 React 테마 솔루션과 마찬가지로 Material UI는 React Context 를 사용하여 구성 요소 계층 전체에 테마 개체를 제공합니다. 이 컨텍스트는 ThemeProvider머티리얼 UI 스타일 의 구성 요소에서 제공 합니다.

import { ThemeProvider } from '@material-ui/core/styles'
export const App = () => 
  <ThemeProvider theme={theme}>
    ...
  </ThemeProvider>

A ThemeProvidertheme소품을 통해 사용자 지정 테마 개체를 제공 할 수 있도록합니다 . 테마가 제공되지 않으면 ThemeProvider기본 테마로 돌아갑니다. 그러나 기본 테마는 정확히 무엇을 수반합니까? 음, 기본 테마의 전체 구조는 여기문서화되어 있으며 기본 테마 의 구조와 구성되는 모든 내용을 설명합니다.

다음은 기본 테마 개체의 최상위 속성에 대한 스크린 샷입니다.

기본 머티리얼 UI 테마의 최상위 속성

를 사용 ThemeProvider하면이 객체는 React 구성 요소 전체에서 액세스 할 수 있으며 스타일 내에서도 더 아래에서 볼 수 있습니다. 이 기본 테마의 더 중요하고 모호한 값을 살펴 보겠습니다.

  • breakpoints속성은 앱의 응답 속도를 정의하는 다양한 너비의 키와 값을 저장 하며 동일한 목적으로 존재 하는 Bootstrap의 레이아웃 중단 점 과 유사합니다 . 기본적으로 xs, sm, md, lgxl키 값 속성의 상응하는 최소 폭에 따라 제공된다. 이러한 값은 반응 형 동작을 만들 때 동일한 규칙을 준수하기 위해 구성 요소 및 스타일 전체에서 액세스 할 수 있습니다.
  • mixins스타일에 직접 삽입 할 수있는 클래스에 대한 추가 규칙을 제공합니다. toolbar(이름에서 알 수 있듯이) 믹스 인 헤더 및 도구 모음의 목적의 스타일에 최소 높이를 주입한다. gutters()믹스 인은 간격 속성을 제공합니다.
  • palette모든 색상이 정의되는 곳입니다. 주요 색상은 대부분의 머티리얼 UI 구성 요소가 의존하는 기본 및 보조 색상입니다. 이러한 키를 넘어하는의 부분 집합 light, dark그리고 main색상이 존재한다.

처음에는 primary색상 팔레트 에 초점을 맞추고 싶을 것 secondary입니다. 이러한 색상을 기반으로 테마 개체를 생성하는 다양한 도구가 온라인에 있습니다. 다음 섹션에서 자동으로 테마를 생성하는 방법을 살펴 보겠습니다.

  • shadows 다양한 강도의 그림자 구성 배열을 제공합니다.
  • typography헤더, 단락 및 버튼을 포함한 모든 텍스트 기반 DOM 요소에 대한 글꼴, 두께, 크기, 행 높이 및 문자 간격을 구성합니다. Typography특히에-이 값에 크게 의존합니다 구성 요소입니다.
  • spacing제공 할 때 유용 marginpadding재료의 UI 솔루션을 스타일링하여 제공된 사용할 때 값. 간격은 실제로 f e()기본 테마 표기법 의 레이블 로 표시되는 함수 입니다. 스타일링 정의를 더 아래에서 다룰 것이지만 이것이 머티리얼 UI 스타일 객체의 간격에 액세스하는 방법입니다.

// padding a `container` style by 2 spacing units
import { 
  createStyles, 
  makeStyles, 
  Theme 
} from '@material-ui/core/styles'
const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    container: {
      padding: theme.spacing(2)
    },
  });
shape.borderRadius구성 요소를 Google과 비슷하게 보이게하는 핵심 값입니다. 모양을 더 둥글거나 직사각형으로 만들면 디자인 언어에 독특한 느낌이 추가되어이 가치를 가지고 놀아 볼 가치가 있습니다.

계속 진행하기 전에이 단계에서 발생하는 몇 가지 일반적인 질문에 대해 살펴 보겠습니다.

  • 기본 테마 구조로 제한됩니까? 절대적으로하지. 선택한 더 많은 속성을 기본 테마 개체에 추가 할 수 있습니다. 표준 머티리얼 UI 구성 요소는 사용자가 도입 할 수있는 임시 테마를 인식하지 못하지만 ThemeProvider이러한 구성을 계속 제공하여 자신의 구성 요소에서 활용할 수 있습니다.
  • 앱별 테마를 만들 때 전체 테마를 다시 정의해야합니까? 아니요, 머티리얼 UI는 주어진 테마 개체의 누락 된 모든 기본값을 채 웁니다. 팔레트의 하위 집합 (아마도 primarysecondary색상 만) 만 정의한 경우 나머지 기본 테마 팔레트가 추가됩니다 (나머지 누락 된 값 포함). 이것은 createMuiTheme다음 섹션에서 사용할에 의해 수행됩니다 .

자신 만의 테마 개체를 생성하는 것은 재미있을 수 있으며 프로세스를 지원하기 위해 온라인에서 사용할 수있는 다양한 도구가 있습니다. 이 섹션에서는 이러한 도구와 테마에 대한 기본 및 보조 색상을 효과적으로 생성하는 방법에 대해 설명합니다. 그런 다음 해당 테마를 JSON 개체로 내보내고 ThemeProvidertheme소품에 복사 할 수 있습니다 .

머티리얼 UI 색상 도구

공식 MUI 색상 도구는 기본 및 보조 테마 색상을 선택하기위한 좋은 시작점입니다. 도구는 여기 에서 찾을 수 있으며 문서는 여기 에서 찾을 수 있습니다 . 색상 도구는 사용하기 쉽고 직관적이며 다양한 인터페이스 요소 및 텍스트 스타일에 적용된 색상을 표시합니다.

다음 스크린 샷은 파스텔과 같은 색상에 초점을 맞춘 관리 패널 프로젝트를 위해 구성한 테마입니다.

색상 도구에 적용된 테마

테마는 오른쪽 상단 링크 아이콘을 통해 공유 할 수도 있습니다. 여기에서 내 테마를 확인하십시오 .

이 테마의 밝고 어두운 변형은 두 가지 주요 색상을 기반으로 자동 생성되었습니다. 이러한 자동 생성 색상의 모호성 때문에 GUI는 "읽을 수 없음"레이블을 통해 호환되지 않는 모든 텍스트-배경-색상 쌍 및 플래그를 표시합니다.

이러한 경고가 지나치게 엄격 할 수 있음을 발견했습니다. 위의 흰색 텍스트 변형과 함께 기본 녹색을 사용하십시오. 궁극적으로 당신은 당신의 앱의 아티스트이고 당신의 필요에 맞는 색상을 최종적으로 결정해야합니다.

테마 편집기 및 JSON 다운로드

또 다른 유용한 도구는 테마 편집기 도구입니다. 이는 공식 머티리얼 UI에서 관리하는 리소스 외부의 오픈 소스 도구입니다. 이 도구는 매우 유용합니다. 테마가 적용된 머티리얼 UI 구성 요소를 더 많이 표시하고 왼쪽 사이드 바에서 사용되는 색상을보다 세밀하게 제어 할 수 있습니다.

위와 동일한 테마가 도구에 적용되었습니다.

테마 편집기 도구에 적용된 동일한 테마

오른쪽 하단 모서리에있는 버튼을 확인하세요.이 버튼을 클릭하면 이전 기본 머티리얼 UI 테마와 동일한 형식으로 테마의 JSON 개체를 내보낼 수 있습니다.

React에서 테마 연결

여기에서 생성 된 테마를 적용하는 것은 간단합니다. theme.js테마를 호스팅 할 파일을 만들고 머티리얼 UI의 createMuiTheme유틸리티 기능을 사용하여 간격을 채 웁니다.

// theme.js
import { createMuiTheme } from '@material-ui/core/styles'
export const theme = createMuiTheme({
  "palette": {
    "common": {
      "black": "#000",
      "white": "#fff"
    },
    "background": {
      "paper": "#fff",
      "default": "#fafafa"
    },
    "primary": {
      "light": "rgba(89, 210, 188, 1)",
      "main": "rgba(20, 160, 140, 1)",
      "dark": "rgba(0, 113, 95, 1)",
      "contrastText": "#fff"
    },
    ...
  }
});
export default theme;

이제이 개체를 사용하면 다음과 같은 ThemeProvider최상위 <App />구성 요소에 자유롭게 적용 할 수 있습니다 .

import { ThemeProvider } from '@material-ui/core/styles'
import { theme } from './theme'
const AppWrapped: React.FC = (props: any) => (
   <ThemeProvider theme={theme}>
      ...
   </ThemeProvider>
)
export default App;

이 글의 마지막 섹션에서는 머티리얼 UI의 스타일링 솔루션과 해당 스타일 내에서 직접 테마 속성에 액세스하는 방법을 간략하게 소개합니다.

머티리얼 UI의 스타일링

머티리얼 UI의 스타일링 솔루션@material-ui/styles패키지 에서 사용할 수 있습니다 . 머티리얼 UI는 다른 스타일링 솔루션과 상호 운용이 가능하지만 해당 솔루션은 작성 시점에 매주 1 백만 건 이상의 다운로드가있는 선호하는 솔루션 인 것으로 보입니다.

컴포넌트에 대한 스타일을 정의 할 때 세 가지 가져 오기가 매우 익숙해집니다.

import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'

문서에 따르면 createStyles실제로는 아무것도하지 않으며 단순히 스타일을 전달하는 ID 기능으로 작동합니다. makeStyles반면에 React의 후크 패턴을 사용하여 스타일 시트를 함수 구성 요소에 연결합니다.

이 세 가지 가져 오기를 결합하여 다음과 같이 컴포넌트에서 사용할 수있는 스타일 시트를 정의 할 수 있습니다.

// defining and using a Material UI stylesheet
const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    container: {
      display: 'flex',
      flexDirection: 'row',
      justifyContent: 'center',
      paddingBottom: theme.spacing(1.5)
    }
  }),
);
export const MyComponent = (props: any) => {
  
  const classes = useStyles();
return (
    <Container className={classes.container}>
      ...
    </Container>
  );
}

또 다른 예로, 팔레트 개체에 액세스하여 클래스에 기본 또는 보조 색상을 할당 할 수 있습니다.

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    paper: {
      padding: theme.spacing(2),
      textAlign: 'center',
      color: theme.palette.text.secondary,
      flex: '1 0 auto',
      margin: theme.spacing(1),
    },
  }),
);

요약하자면

이 글은 여러분의 요구 사항에 맞게 Material UI 컴포넌트의 라이브러리를 스타일링 할 수 있도록하기 위해 React 앱을 테마 화하는 맥락에서 Material UI를 소개했습니다.

기본 테마 개체와 구성 할 수있는 속성 범위, ThemeProvider컨텍스트 를 통해 React 구성 요소 계층 구조에 테마를 제공하는 방법에 대해 설명했습니다 . 그런 다음 오픈 소스 커뮤니티에서 제공하는 온라인 도구를 사용하여 테마 색상 팔레트를 효과적으로 만드는 방법을 조사했습니다. 또한 머티리얼 UI 스타일링 솔루션과 스타일 시트 내에서 직접 테마 구성에 액세스하는 방법도 간단히 살펴 보았습니다.

더 고급 머티리얼 UI 기사가 게시되는대로 여기에 포함됩니다!

Suggested posts

좋은 습관을 만들고 유지하는 방법

장기적인 습관을 유지하기위한 생산성 팁

좋은 습관을 만들고 유지하는 방법

두 아이의 엄마가 된 후 일을 끝내기가 더 어려워졌습니다. 나는 한 작업에서 다음 작업으로 뛰어 들었고 하루가 끝날 때까지 아무것도하지 않았을 때 실망했습니다.

양자 컴퓨팅 Pt를위한 프로그래밍. 1 : NumPy

이제 양자 컴퓨팅이면의 물리학을 배우기 시작 했으므로 "이봐, 실제로 양자 컴퓨터를 사용하려면 실제로 양자 장치를 손으로 만들어야합니까?"라고 궁금해 할 것입니다. 답은 양자 컴퓨터를 컴퓨터라고 부르는 이유가 있습니다. 프로그래밍이 가능합니다! 이 시리즈에서는 수학 개념을 시뮬레이션하고 양자 컴퓨터에서 실행하는 소프트웨어를 구축하는 방법을 배우게됩니다. 깨끗하고 현대적이며 라이브러리가 풍부한 언어이기 때문에 Python을 사용하여 코드를 작성할 것입니다.

Related posts

성능 최적화 된 A / B 테스트 솔루션

성능 최적화 된 A / B 테스트 솔루션

의제 : 소개 : TL;하지만 읽을 수 있습니다. A / B 테스트, CloudFront 및 Lamba @ edge에 대해 이미 알고있는 경우 AWS Lambda @ edge를 사용한 A / B 테스트로 직접 이동하십시오. A / B 테스트 란 무엇입니까? A / B 테스트는 웹 사이트의 두 가지 버전에 대한 사용자의 참여를 비교하는 데 초점을 맞춘 UX 연구 방법론입니다.

fp-ts (Typescript)에서 Option 및 둘 중 하나 사용

저는 함수형 프로그래밍을 좋아합니다. 몇 년 동안 실수를하거나 토끼 구멍을 뚫는 것으로부터 저를 몇 번 구해 주었기 때문입니다. 동일한 입력이 주어지면 출력이 항상 동일하다는 것을 알면 안심입니다.

Syncfusion Blazor 파일 업로드 구성 요소에서 이미지를 미리 보는 방법

Syncfusion Blazor 파일 업로드 구성 요소에서 이미지를 미리 보는 방법

Syncfusion Blazor 파일 업로드는 하나 이상의 파일, 이미지, 문서, 오디오, 비디오 및 기타 파일을 서버에 업로드하기위한 구성 요소입니다. 여러 파일 선택, 진행률 표시 줄, 자동 업로드, 끌어서 놓기, 폴더 (디렉터리) 업로드, 파일을 포함하는 다양한 기능을 갖춘 HTML5 업로드 구성 요소 (<input type =”file”>)의 확장 버전입니다. 검증 등.

6 React 개발자로서 후회

내가 일찍했으면하는 것

6 React 개발자로서 후회

React는 배울 수있는 훌륭한 도구입니다. 그것은 우리가 우리 자신의 방식으로 일을 할 수있게합니다.