[React] 테마를 만들어서 색상코드 없이 이름으로만 색을 불러보자

위치: src/assets/theme/index.jsx

준비1

export default {
  colors: {
    backgroundColor: "000000",
    main: "#FFC74A",
    orange: "#FFA751",
    yellow: "#FFE259",
    black: "#000000",
    green: "#34BA05",
    white: "#FFFFFF",
    gray: "#DDDDDD",
  },
};

원하는 색상의 이름과 색상 코드를 함께 적어서 저장한다.

준비2

src/index.js에 들어가서
<React.StrictMode>안에 < ThemeProvider theme={theme}>를 추가해주자.
(import ThemeProvider도 필수)

import React from "react";
import ReactDOM from "react-dom/client";
import reportWebVitals from "./reportWebVitals";
import { ThemeProvider } from "styled-components";
import theme from "./assets/theme";
import GlobalStyle from "./GlobalStyle";
import Router from "./routes/index";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <ThemeProvider theme={theme}>
      <GlobalStyle />
      <Router />
    </ThemeProvider>
  </React.StrictMode>
);

reportWebVitals();

사용

props.theme.colors.색이름으로 컴포넌트의 css에서 사용할 수 있다.

  :hover {
    background-color: ${(props) =>
      props.hoverColor || props.theme.colors.orange};
  }