90. CSS 모듈을 사용한 동적 스타일

 

자주 쓰이는 부분이다 
!isValid ? styles.invalid : null 과 같다고 보면 될 듯 하다

!isValid && styles.invalid

 

Button.js

import React from 'react';
import styles from "./Button.module.css";

const Button = props => {
  return (
    <button type={props.type}
      className={styles.button}
      onClick={props.onClick}>
      {props.children}
    </button>
  )
}
export default Button;

 

Button.module.css

.button {
  width: 100%;
  font: inherit;
  padding: 0.5rem 1.5rem;
  border: 1px solid #8b005d;
  color: white;
  background: #8b005d;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.26);
  cursor: pointer;
}

.button:focus {
  outline: none;
}

.button:hover,
.button:active {
  background: #ac0e77;
  border-color: #ac0e77;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.26);
}

@media (min-width: 768px) {
  .button {
    width: auto;
  }
}

 

이 방식이 제일 간단한 것 같아서 아마 나는 styled component 보다 이 css module 방식을 더 많이 사용하지 않을까 싶다