CSS framework Ant design 사용해보기

냐하호후·2022년 6월 28일
0

Ant-design (antd)

중국에서 만든 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가 잘 안되었던 것 같다.

profile
DONE is better than PERFECT

0개의 댓글