[리액트] props를 className으로 지정하기

App.jsx

import Button from './components/Button'

function App() {
  return (
    <div>
      <Button size="large" color="tomato" />
      <Button size="medium" color="orange" />
      <Button size="small" color="skyblue" />
    </div>
  )
}

export default App

 

Button.jsx

className의 속성값으로 데이터 props가 오므로 백틱`` 안에 ${} 기호로 받아온 props를 넣어주면 class의 이름으로 지정된다.

import React from 'react'
import '../styles/Button.scss'

function Button({ size, color }) {
  return (
    <button className={`button ${size} ${color}`}>
      <p>버튼</p>
    </button>
  )
}

export default Button

 

Button.scss

$main-color: green;

.button {
  // 버튼에 먹여진 속성 제거
  outline: none;
  border: none;

  // 내부 요소 정렬
  display: flex;
  align-items: center;
  justify-content: center;

  // 색상/테두리 스타일 적용
  background-color: $main-color;
  border-radius: 10px;
  color: white;

  // 여백 적용
  margin: 10px;

  &.large {
    width: 140px;
    height: 70px;
    font-size: 24px;
  }

  &.medium {
    width: 120px;
    height: 60px;
    font-size: 20px;
  }

  &.small {
    width: 100px;
    height: 50px;
    font-size: 16px;
  }

  &.tomato {
    background-color: tomato;
  }

  &.orange {
    background-color: orange;
  }

  &.skyblue {
    background-color: skyblue;
  }
}