react.js로 ant-design 시작하기

설치

npm install antd

antd 하나만 깔면 자잘한 패키지들까지 모두 설치해준다.

 

컴포넌트에서 사용

import { React } from "react";
import { Button, Tooltip } from "antd";
import { FilterOutlined } from "@ant-design/icons"

export default function Menu () {
    return (
        <div className="Menu">
            <Tooltip title="버튼">
                <Button shape="circle" icon={<FilterOutlined />} />
            </Tooltip>
        </div>
    );
}

다른 UI 컴포넌트와 비슷한 방식으로 사용할 수 있다. 아이콘버튼에 마우스를 올리면 툴팁이 나타나는 예제이다.

import 'antd/dist/antd.css';

하다보면 뭔가 똑바로 안나오는 경우가 있는데 (예시 : Spin), 그럴 때는 antd의 css파일을 하나 불러오면 된다. 여기까지 왔으면 다른거 다 필요없고 컴포넌트 목록보고 쏙쏙 뽑아먹으면 된다. 

ant.design/components/button/

Button - Ant Design

 

 

커스텀 스타일링 : Less

본래 ant design 문서의 'customize Theme'부분에서는 Less로 정의된 테마를 어찌어찌 잘 작업해주는걸 설명해주고 있다. 첫 번째 링크는 설명 문서이고, 두 번째 링크는 default값으로 정의된 모든 값을 보여주는 파일이다. 

ant.design/docs/react/customize-theme

Customize Theme - Ant Design

github.com/ant-design/ant-design/blob/master/components/style/themes/default.less

ant-design/ant-design

 

커스텀 스타일링 : styled-components로 스타일 덮어쓰기

공식문서에서 설명해준게 하기 싫어서 다른 방법을 가져왔다. 다른 문서들을 잘 살펴보니, 'styled-components'를 이용하여 Ant design에서 제공하는 스타일을 덮어쓸 수도 있었다. 그냥 styled-components 쓸 때 하던일 그대로 하면 된다.

 

npm install styled-components

먼저 npm으로 내려받아주고

import { React } from "react";
import styled from "styled-components";

import { Button, Tooltip } from "antd";
import { FilterOutlined } from "@ant-design/icons"

export default function Menu () {
    return (
        <div className="Menu">
            <Tooltip title="버튼">
                <MenuButton shape="circle" icon={<FilterOutlined />} />
            </Tooltip>   
        </div>
    );
}

const MenuButton = styled(Button)`
    background-color : red;
    `;

위와 같이 스타일을 스타일을 먹여줄 수 있다.

import styled from "styled-components"

import { 뭐시기 } from "antd";

export default function App() {
	return (
    	<스타일먹인 뭐시기 />
    );
}

const 스타일먹인 뭐시기 = styled(뭐시기)`
color : 빨강빨강;
    background-color : 초록초록;
	`;

이 내용이 핵심이다.