Material-UI Typography에 더 많은 변형 추가

이봐,

Material-UI Typography 구성 요소에는 h1 ~ h6 , subtitle1 , body1 등과 같은 15개의 기본 유형을 포함하는 변형 소품이 있습니다. 여기에서 옵션을 볼 수 있습니다https://material-ui.com/api/typography/
이제 Typography 구성 요소에 더 많은 것을 추가하고 더 많은 디자인을 원하면 아래와 같이 사용자 정의 typography 구성 요소를 만들어야 합니다.

이것은 내 구성 요소 디렉토리에 있는 MyTypography.tsx입니다.

import { TypographyProps, Typography } from '@material-ui/core'
import classNames from 'classnames'
import React, { ElementType, FC } from 'react'
import useMyTypographyStyle from './MyTypography.styles'

interface IMyTypography extends Omit<TypographyProps, 'variant'> {
  variant:
  | TypographyProps['variant']
  | 'h2Bold'
  | 'subtitle1Bold'
  component?: ElementType
}
const MyTypography: FC<IMyTypography> = (props) => {
  const classes = useMyTypographyStyle()
  const isCustom = Object.keys(classes).indexOf(props.variant) > -1
  return (
    <Typography
      {...props}
      variant={isCustom ? undefined : (props.variant as any)}
      className={
        isCustom
          ? classNames(classes[props.variant], props.className)
          : props.className
      }
    >
      {props.children}
    </Typography>
  )
}

export default MyTypography

이 경우 isCustom 값을 기반으로 변형이 정의되지 않았거나 기본 Material-UI Typography 변형을 가져오는 구성 요소를 만들었으며 이 값은 MyTypography 구성 요소에 전달할 때의 props입니다.
또한 사용자 정의 변형에 디자인을 추가하기 위한 스타일 파일이 있어야 합니다.

import { makeMyStyles } from 'theme'

const useMyTypographyStyle = makeMyStyles(
  ({ typography }) => ({
    h2Bold: { ...typography.h2, fontWeight: 700 },
    subtitle1Bold: { ...typography.subtitle1, fontWeight: 700 },
  }),
  { name: 'myTypography' },
)

export default useMyTypographyStyle

그게 다야. 우리는 해냈다. 이제 변형 소품에 대한 17개의 값이 있으며 Typography 구성 요소를 사용하려면 다음과 같이 사용해야 합니다.

<MyTypography variant='h2Bold'>heading 2 with custom styles</MyTypography>
<MyTypography variant='subtitle1Bold'>subtutle 1 with custom styles</MyTypography>