Fall in IT.

React에서 CLSX 플러그인 간단 사용법 본문

카테고리 없음

React에서 CLSX 플러그인 간단 사용법

D.Y 2020. 2. 28. 12:46
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

안녕하세요.

 

오늘은 clsx 플러그인에 대해서 알아보도록 하겠습니다.

React를 사용해서 개발할때 특정 조건에 따라서 className을 추가하거나 삭제해야할 경우가 많이 있습니다.

 

이때, clsx 플러그인을 사용하면 깔끔하게 className을 추가하거나 삭제할 수 있습니다.

 

설치방법

$ yarn add clsx

 

예제코드

import React from "react";
import "./Home.css";
import { makeStyles } from "@material-ui/core";
import clsx from "clsx";

const useStyles = makeStyles((theme) => ({
  rootContainer: {
    padding: theme.spacing(2)
  },
  homeContainer: {
    fontSize: 20
  },
}))

function Home() {
  const classes = useStyles();

  return < div >Hello World!< /div >;
}

export default Home;

 

참조

 

2 Comments
댓글쓰기 폼