Material Kit React

구글의 Material Design에서 영감을 받아 만들어진 Material Kit React는 일관성을 주요 특징으로 하는 요소 세트를 구축합니다. 그런 방식으로 웹 개발 프로젝트는 외관과 기능 면에서 유사성을 유지합니다. 키트에는 버튼, 배지, 슬라이더, 메뉴, 페이지, 네비게이션, 탭 및 알약과 같은 여러 기본 요소도 포함되어 있습니다. 이 리액트 컴포넌트 프레임워크를 사용하여 대부분의 요소에 대해 스타일, 크기 및 색상을 사용자 지정할 수 있습니다. 자바스크립트 요소에는 모달, 툴팁, 날짜 시간 선택기, 캐러셀 및 팝오버가 포함됩니다.

Material UI

Material UI는 가장 인기 있는 React UI 프레임워크 중 하나로 새로운 기능을 더 빨리 전송하기 위해 기본적인 React UI 구성 요소 라이브러리를 포함합니다.

Material UI

yarn add @mui/material @emotion/react @emotion/styled

• Google의 Material Design을 구현하는 오픈 소스 React 컴포넌트 라이브러리

Joy UI

yarn add @mui/joy @emotion/react @emotion/styled

• React UI 컴포넌트가 포함된 디자인 라이브러리
• 디자인 시스템의 출발점으로서 Material Design 가이드라인을 준수하지 않는 프로젝트를 위한 Material UI의 대안
• 기본적으로 MUI 자체의 사내 설계 원리를 구현하는 사용자 정의가 용이한 오픈 소스 React 컴포넌트 라이브러리

CSS variables

Theme object

CsSVarsProvider는 테마 입력(또는 기본 테마)을 읽고 테마 구조에 따라 CSS 변수를 생성하며, 생성된 CSS 변수를 theme.vars로 참조하는 객체를 생성하여 자바스크립트 테마 객체에서 사용할 수 있도록 합니다.
theme.vars는 Joy UI가 제공하는 모든 스타일링 API에서 사용할 수 있습니다:

// 1. styled function
const Div = styled('div')(({ theme }) => ({
  color: theme.vars.palette.primary[500], // var(--joy-palette-primary-500)
}));
// 2. sx prop
<Chip sx={(theme) => ({ boxShadow: theme.vars.shadow.sm })} /> // var(--joy-shadow-sm)
// 3. style overrides
extendTheme({
  components: {
    JoyButton: {
      root: ({ theme }) => ({
        fontFamily: theme.vars.fontFamily.display, // var(--joy-fontFamily-display)
      }),
    },
  },
});

sx prop

sx prop 내부에서 short-hand 구문을 사용할 때 Joy UI는 theme.vars.*의 값을 해결하려고 합니다. . 표기법을 사용하여 객체의 값을 얻을 수 있습니다.

<Chip
  sx={{
    border: '1px solid',

    // lookup from `theme.vars.palette`
    borderColor: 'neutral.400', // 'var(--joy-palette-neutral-400)'

    // lookup from `theme.vars.shadow`
    shadow: 'sm', // 'var(--joy-shadow-sm)'

    // lookup from `theme.vars.fontSize`
    fontSize: 'sm', // 'var(--joy-fontSize-sm)'
  }}
/>

Custom prefix

기본적으로 생성된 CSS 변수에는 joy가 접두사로 붙습니다.
접두사를 다른 것으로 변경하려면 extendTheme에 cssVarPrefix를 제공합니다:

<CssVarsProvider theme={extendTheme({ cssVarPrefix: 'company' })} />
- --joy-fontSize-md: 1rem;
+ --company-fontSize-md: 1rem;

extendTheme({ cssVarPrefix: '' })
- --joy-fontSize-md: 1rem;
+ --fontSize-md: 1rem;

Base UI

yarn add @mui/base

• 하위 수준의 Hooks와 "스타일링되지 않은" 구성 요소가 포함된 라이브러리.
  MUI Base의 도움으로 앱의 CSS와 접근성 기능이 완전히 제어 가능.
• Material UI와 동일한 컴포넌트가 많지만 Material Design 구현은 없음.
• 기본 테마 또는 내장된 스타일 엔진과 함께 제공되지 않기 때문에, 앱의 CSS 구현 방식에 대한 완벽한 제어가 필요한 경우 좋은 선택이 됨.

MUI System

yarn add @mui/system @emotion/react @emotion/styled

• 맞춤형 디자인의 레이아웃을 가속화하는 CSS 유틸리티 세트로 구성.
• Base UI가 "스타일링되지 않은" React 컴포넌트의 라이브러리인 반면, MUI System은 이러한 컴포넌트에 스타일을 신속하게 적용하기 위한 유틸리티 집합.
• Base UI는 독립 실행형 컴포넌트 라이브러리인 반면, MUI System은 Base UI 및 기타 MUI 컴포넌트와 타사 컴포넌트와 쌍을 이루도록 설계되었다는 점에서 보충적.