리베이스 인트로

나는 최근에 Styled System 라이브러리를 기반으로 하는 사용자 정의 가능한 UI 요소 세트를 생성하기 위한 Rebass라는 흥미로운 UI 라이브러리에 대해 읽었습니다. React 구성 요소가 DOM이 아닌 캔버스에 렌더링할 수 있는 기능을 제공합니다. 스타일이 지정된 8개의 기본 구성 요소가 포함되어 있으므로 ThemeProvider를 사용하여 사용자 정의 UI 구성 요소를 앱으로 확장할 수 있습니다. 이것은 또한 앱에서 사용자 정의 CSS를 작성해야 하는 필요성을 줄여줍니다.

설치

핵심 Rebass 라이브러리 설치:
npm i rebass

용법

테마 제공자

Rebass 구성 요소는 스타일이 없고 기본적으로 테마를 포함하지 않습니다. ThemeProvider 구성 요소를 사용하고 컨텍스트에 테마를 제공하여 애플리케이션에 테마를 추가할 수 있습니다. 이 예제는 Rebass 사전 설정 테마와 함께 Emotion ThemeProvider를 사용합니다.
npm i @rebass/preset emotion-theming
그런 다음 ThemeProvider 구성 요소로 래핑합니다.

import React from 'react'
import { ThemeProvider } from 'emotion-theming'
import theme from '@rebass/preset'
export default props =>
  <ThemeProvider theme={theme}>
    {props.children}
  </ThemeProvider>

테마

기본 Rebass 테마를 사용하거나 사용자 정의 테마로 모양과 느낌을 완전히 사용자 정의할 수 있습니다. Rebass는 테마 사양을 따르므로 테마 UI 또는 스타일 시스템과 함께 사용하기 위해 빌드된 모든 테마는 기본적으로 작동합니다.

import React from 'react'
import { ThemeProvider } from 'emotion-theming'
const theme = {
  fontSizes: [
    12, 14, 16, 24, 32, 48, 64
  ],
  colors: {
    primary: '#07c',
    gray: '#f6f6ff',
  },
  buttons: {
    primary: {
      color: 'white',
      bg: 'primary',
    },
    outline: {
      color: 'primary',
      bg: 'transparent',
      boxShadow: 'inset 0 0 0 2px'
    },
  },
}
export default props =>
  <ThemeProvider theme={theme}>
    {props.children}
  </ThemeProvider>

카드 복합 부품

다음은 카드 상자 구성 요소의 예입니다.

  <Box width={256}>
    <Card
      sx={{
        p: 1,
        borderRadius: 2,
        boxShadow: '0 0 16px rgba(0, 0, 0, .25)',
      }}>
      <Image src={props.image} />
      <Box px={2}>
        <Heading as='h3'>
          Card Demo
        </Heading>
        <Text fontSize={0}>
          You can edit this code
        </Text>
      </Box>
    </Card>
  </Box>

이것은 Rebas에 대한 간략한 설명입니다. 공식site에서 소품, 이미지, 버튼 등을 사용자 정의하는 방법을 볼 수 있습니다.

참고문헌

https://rebassjs.org/

https://github.com/rebassjs/rebass