【React × Emotion】ThemeProviderの使い方

Copy
"dependencies": {
    "@emotion/react": "11.8.2",
    "react": "18.0.0",
    "react-dom": "18.0.0",
    "react-scripts": "4.0.0"
  },
  "devDependencies": {
    "@babel/runtime": "7.13.8"
  },

Copy
/** @jsxImportSource @emotion/react */
import "./styles.css";
import ComponentA from "./componentA";
import ComponentB from "./componentB";
import ComponentC from "./componentC";
import { ThemeProvider } from "@emotion/react";
import React, { useState } from "react";

// テーマを定義する
// ライトテーマ
const lightTheme = {
  mode: "light",
  background: "#ffffff",
  color: "#000000"
};

// ダークテーマ
const darkTheme = {
  mode: "dark",
  background: "#222639",
  color: "#f0f5fa"
};

export default function App() {
  // テーマをstateで保持
  const [theme, setTheme] = useState(darkTheme);

  // テーマを切り替える関数
  const changeTheme = (mode) => {
    if (mode === "dark") {
      return lightTheme;
    } else {
      return darkTheme;
    }
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>React + Emotion + ThemeProvider</h2>
      <ThemeProvider theme={theme}>
        <ComponentA />
        <ComponentB />
        <ComponentC />
      </ThemeProvider>
      <button onClick={() => setTheme(({ mode }) => changeTheme(mode))}>
        Theme change
      </button>
    </div>
  );
}

Copy
/** @jsxImportSource @emotion/react */
import { css } from "@emotion/react";

const ComponentA = () => {
  return <div css={[style]}>hello ComponentA</div>;
};

export default ComponentA;

// themeProviderに渡したthemeを暗黙的にpropsから参照できる
const style = (theme) => {
  return [
    css`
      color: ${theme.color};
      background-color: ${theme.background};
    `
  ];
};

Copy
/** @jsxImportSource @emotion/react */
import { css } from "@emotion/react";
import { useTheme } from "@emotion/react";

const ComponentB = () => {
  //theme取得
  const theme = useTheme();

  const style = () => {
    return [
      css`
        color: ${theme.color};
        background-color: ${theme.background};
      `
    ];
  };

  return <div css={[style]}>hello ComponentB</div>;
};

export default ComponentB;