중국에서 만든 UI를 위한 라이브러리이다.
React,Angular,Vue를 위한 컴포넌트 라이브러리 버전 또한 존재한다.
초보자도 쉽고 빠르게 사용할 수 있다.
단점: Less 기반이어서 styled-components와 호환이 안좋다.
npm install antd
npm i antd @types/antd
npm i @antd-design/icons
나는 cra를 이용해서 typescript + react 프로젝트를 만들었다. 아이콘도 추가로 설치해주었다.(안쓸거면 안받아도 된다)
src/App.css에 @import '~antd/dist/antd.css';
를 꼭 작성해주어야한다.
import React, { FC } from "react";
import { Button } from "antd";
import "./App.css";
import User from "./components/Star";
const App: FC = () => (
<div className="App">
<Button type="primary">Button</Button>
<User />
</div>
);
export default App;
antd 사용법을 검색해보면 이 버튼을 만드는 예시가 많이 나온다.
나같은 경우에는 처음부터 App.js에서 사용해보지 않고 components폴더안에 파일을 하나 만들어서 그 파일을 import했다.
왜 컴포넌트가 antd css가 안먹힌거지 생각했다.
App.js에 FC가 적용이 안되어서 그런가 -> 아니었다 관련 없었다
App.css에 import가 잘 안되었던 것 같다.