React CSS 전역변수 사용하기(ThemeProvider)

export const HeaderWrapper = styled.header`
  background-color: ${(props) => props.theme.subColor};
`;

이런 식으로 css를 설정할 수 있다

방법은 이러하다

---

src/style/theme.js

export const theme = {
  mainColor: "green",
  subColor: "yellowgreen",
};

사용할 변수를 설정해준다

---

src/index.js

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { ThemeProvider } from "styled-components";
import { theme } from "./style/theme";

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

ThemeProvider로 감싸주고 theme를 임포트해서 보내주면 전역적으로 쓸 수 있다