React Typography

설명

Typography Component 를 만들면서 참고한 글들을 적어본다

property 와 sass className 연결

An Introduction to Reusable Components and how to create Typography Component

.typography--variant-h1 {
    font-size: 6rem;
    font-weight: 500;
}

.typography--variant-h2 {
    font-size: 3.75rem;
    font-weight: 500;
}

const Button = ({color, children, ...props}) => {
    return (
        <button
            className={cn({
                'button--color-primary': color === 'primary',
            })}
            {...props}
        >
            {children}
        </button>
    )
}

Dynamic tag

Typing a dynamic tag in React with TypeScript?

a tag 외는 타입을 더 지정해 주어야 하는 방법

tag 자동완성을 위해 여기에 ComponentType 을 추가했다. 아래와 같다

import {ComponentType} from 'react'
interface CompProps {
    tag: ComponentType keyof JSX.IntrinsicElements
}

const MyComponent: React.FunctionComponent<CompProps & React.HTMLAttributes<HTMLOrSVGElement>> = ({tag: Wrapper = 'div', children, ...rest}) => {
    return <Wrapper {...rest}>{children}</Wrapper>
}

그외 참고하면 좋을 방법들

Building a React typography system

codesandbox

clean-tag,styled-system, styled-components 을 사용아여 구축하고 있다.

styled-system 샘플 코드

import styled from 'styled-components'
import { space, layout, typography, color } from 'styled-system'

const Box = styled.div`
  ${space}
  ${layout}
  ${typography}
  ${color}
`

<Box width={1/2} />

참고