module 응용해 버튼 스타일링

목적: 메인 버튼과 서브 버튼을 시각적으로 구분하기 위함

0, Button.module.css파일 생성

1, App.js에 버튼 임포트

import "./App.css";
import Btn from "./components/btn/Btn";

function App() {
  return (
    <div>
      <Btn>Primary-main</Btn>
      //<Btn className="btn--secondary">Secondary-sub</Btn> 대신
      <Btn secondary>Secondary-sub</Btn>
    </div>
  );
}

export default App;

2, Btn.js

import React from "react";
//import "./Button.scss"; 대신
import styles from "./Button.module.css";
// styles: object

const Btn = (props) => {
  return (
    //<button className={`btn ${props.className || ""}`}>{props.children}</button> 대신
    
        <button
      className={`${styles.btn} ${props.secondary ? styles.btnSecondary : ""}`}
    >
      {props.children}
    </button>
  );
};
export default Btn;

3, Button.module.css
sass와 달리, btn {} 안에 sub btn css 넣는 건 아니라,
동릭적인 블록 하나를 별도로 작성

.btn {
  display: inline-block;
  border: none;
  outline: none;
  color: white;
  background-color: #b6aff1;
  padding: 20px 30px;
  margin: 10px;
  font-size: 20px;
  border-radius: 8px;
  width: 200px;
  cursor: pointer;
}
.btnSecondary {
  background-color: transparent;
  color: rgb(138, 138, 138);
  border: 1px solid currentColor;
}

directory: