IBM carbon design system React framework 사용해보기

 

 

npm install @carbon/react

carbon/react를 프로젝트 폴더에 깔아준다. 

 

 

https://react.carbondesignsystem.com/?path=/docs/components-button--overview

Carbon Components React

위 링크에 들어가면 여러가지 component를 찾아볼 수 있다. 

 

 

 

 

여기있는 버튼 디자인을 사용해보려고 한다. 

 

 

 

 

Show Code 버튼을 누르면 

 

 

 

코드가 나온다. 

 

 

 

 

 

부트스트랩보다 설정해야할 게 몇 개 더 있다.

- 어떤 component를 사용할 지 import 하기

- scss 파일에 @use '@carbon/react'; 써주기

- js 파일에 위에서 적은 scss 파일을 import 하기

 

 

 

 

전체 코드

App.js

import React from 'react';
import {Button} from '@carbon/react';
import './style/AppTest.scss';

function App() {
  return (
    <div>
      <Button className="btn">Primary</Button>
      <Button kind="secondary">Secondary</Button>
      <Button kind="tertiary">Tertiary</Button>
      <Button kind="danger">Danger</Button>
      <Button kind="danger--tertiary">Danger Tertiary</Button>
      <Button kind="danger--ghost">Danger Ghost</Button>
      <Button kind="ghost">Ghost</Button>
    </div>

  );
}

export default App;

 

 

 

AppTest.scss

// Bring in all the styles for Carbon in your root/global stylesheet
@use '@carbon/react';

.btn{
  background-color : pink;
}

 

 

 

 

 

 

 

 

1️⃣ component import 하기 

import {Button} from '@carbon/react';

 

사용할 component를 import 해온다. 

Button을 사용해보려고 Button을 가져왔다. 

 

 

 

 

2️⃣ scss 파일 import 

import './style/AppTest.scss';

그리고 적용할 scss 파일도 생성한 뒤 import 해온다. 

 

 

 

3️⃣ 사용할 component 넣기 

      <Button className="btn">Primary</Button>
      <Button kind="secondary">Secondary</Button>
      <Button kind="tertiary">Tertiary</Button>
      <Button kind="danger">Danger</Button>
      <Button kind="danger--tertiary">Danger Tertiary</Button>
      <Button kind="danger--ghost">Danger Ghost</Button>
      <Button kind="ghost">Ghost</Button>

사용할 요소들을 적어준다. 

 

 

 

 

4️⃣ carbon 스타일 가져오기

@use '@carbon/react';

전역 scss 파일에 @use '@carbon/react'; 를 작성해준다. 

 

 

 

 

이렇게 사용할 수 있다.