sass 응용해 버튼 스타일링

목적: 메인 버튼과 서브 버튼을 시각적으로 구분하고, 코드를 효율적으로 작성하기 위함

1, sass 설치

npm install sass

2, 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>
    </div>
  );
}

export default App;

3, Btn.js

import React from "react";
import "./Button.scss";

const Btn = (props) => {
  return (
    <button className={`btn ${props.className || ""}`}>{props.children}</button>
  );
};
// || "": front에서 검사 시 요소에서 undefined가 안 보이도록 조건 추가
export default Btn;

4, css파일의 경우, .scss파일로 생성
Button.scss

.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;

  &--secondary {
    background-color: transparent;
    color: rgb(138, 138, 138);
    border: 1px solid currentColor;
  }
  //   btn: main btn, secondary: sub btn
}