[SASS] classNames 사용하기

classNames는 SCSS에서 className들을 조합해주는 역할을 한다.

className은 SCSS에서 CSS를 각 tag들에 적용해주는 역할을 한다.

 

우선 classNames를 사용하기 위해서는 classnames라는 패키지를 설치해줘야 한다.

$ npm install classnames

가장 먼저 classNames를 import 해줘야 한다.

import classNames from 'classnames'

그리고 각각 필요한 CSS들을 조합해 줄 수 있다.

classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'

classNames({ foo: true }, { bar: false }); // => 'foo'

 

마지막으로 조합한 예시는 다음처럼 사용이 가능하다.

import classNames from 'classnames'
import React from 'react'
import styles from './Button.module.scss';

const Button = ({
  type = 'button',
  secondary = false,
  bgColor,
  fgColor,
  width,
  ...restProps
}) => {

  const composeClasses = classNames(
    styles.button,
    secondary ? styles.secondary : styles.primary
  )

  const style = {
    backgroundColor: bgColor || '',
    color: fgColor || '',
    width: width || '',
  };

  return (
    <button
      className={composeClasses}
      type={type}
      style={style}
      {...restProps}
    />
  )
}

export default Button

composeClasses처럼 따로 변수로 빼서 사용이 가능하다.

위에서 보면 secondary라는 값이 true일때는 styles.button + styles.secondary를 사용하는 것이고,

false일때에는 styles.button + styles.primary를 사용한다는 예제이다. 

 

참고

https://react.vlpt.us/styling/01-sass.html