CSS style

global한 css를 원할 때

src/styles.css

모든 button이 해당 style을 가진다.

button {
  color: white;
  background-color: tomato;
}

src/index.js

import해주면 적용된다.

import "./styles.css"

컴포넌트 별 개별적인 style을 원할 때 : 컴포넌트에 직접적으로 넣어준다.

Button.js

import propTypes from "prop-types";

function Button({ text }) {
  return (
    <button style={{ backgroundColor: "tomato", color: "black" }}>  // 직접!
      {text}
    </button>
  );
}

Button.propTypes = {
  text: propTypes.string.isRequired,
};

export default Button;

CSS를 이용하면서 전역적이지 않게 style을 설정하는 방법은? CSS module을 만들기!

Javascript 코드 안에 CSS 코드를 쓰는 것은 예쁘진 않다.

<aside> 💡 브라우저를 통해 html 코드를 확인해보면 해당 컴포넌트에 무작위의 class name이 붙는다. 요소가 각각의 클래스네임을 가지게 돼서 일일이 class name을 기억해서 스타일링 할 필요가 없다.

</aside>

src/Button.module.css

css 코드를 만들어서

.btn {
  color: white;
  background-color: tomato;
}

Button.js