Typography
Typography
html 콘텐츠에 타이포그래피 스타일을 적용하는 스타일 제공자(styles provider) 컴포넌트예요. 마크다운/HTML로 된 콘텐츠를 예쁘게 렌더링할 때 사용해요.
출처: 문서
본문
사용법 (Usage)
Mantine은 전역 타이포그래피 스타일을 포함하지 않아요. Typography를 사용해 html 콘텐츠에 타이포그래피 스타일을 더해요.
import { Typography } from '@mantine/core';
function Demo() {
return <Typography dangerouslySetInnerHTML={{ __html: 'Your html here' }} />;
}
예시 (Example)
아래는 CSS-Tricks 웹사이트의 예시 기사로, Typography 컴포넌트의 실제 스타일을 보여줘요.
모든 스타일 데모 (All styles demo)
Typography는 다음 요소에 대한 스타일을 포함해요.
- 문단(paragraphs)
- 제목(headings)
- 목록(lists)
- 인용(blockquotes)
- 표(tables)
- 링크(links)
- 이미지(images)
- hr
- kbd
- code와 pre
import { Typography } from '@mantine/core';
const html = '...html content here...';
function Demo() {
return <Typography dangerouslySetInnerHTML={{ __html: html }} />;
}
Typography는 다음 콘텐츠 스타일을 제공해요: Heading 1~6, Mantine link, 문단 텍스트, 순서 없는 목록과 순서 있는 목록, 인용구(blockquote), inline code, kbd, mark, 표(table), 접이식 details 요소. 예를 들어 코드 블록은 아래처럼 렌더링돼요.
import { Avatar } from '@mantine/core';
import image from './image.png';
export function AvatarDemo() {
return <Avatar src={image} />;
}