EmotionでThemeを書き換える

実装方法でハマったので備忘録として残しておく。

src/components/MyAppTheme.ts

import { ThemeProvider } from "@emotion/react";
import styled from "@emotion/styled";
import { MyAppTheme } from "./MyAppTheme";

const ThemeButton = styled.button`
  background-color: ${({theme}) => theme.backColor};
  color: ${({theme}) => theme.foreColor};
  padding: ${({theme}) => theme.padding};
`;

export const Buttons = () => {
  return (
    <ThemeProvider theme={MyAppTheme}>
      <ThemeButton >Button</ThemeButton>
    </ThemeProvider>
  );
}

src/App.tsx

import { ThemeProvider } from "@emotion/react";
import styled from "@emotion/styled";
import { MyAppTheme } from "./components/MyAppTheme";

const ThemeButton = styled.button`
  background-color: ${({theme}) => theme.backColor};
  color: ${({theme}) => theme.foreColor};
  padding: ${({theme}) => theme.padding};
`;

export default function App() {
  return (
    <ThemeProvider theme={MyAppTheme}>
      <ThemeButton >Button</ThemeButton>
    </ThemeProvider>
  );
}