EmotionでThemeを使ってみる

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

const ThemeButton = styled.button`
  background-color: ${({theme}) => theme.color.primary};
  color: ${({theme}) => theme.color.positive};
  &:hover {
    background-color: ${({theme}) => theme.color.negative}
  }
`;

export const Buttons = () => {
  return (
    <ThemeProvider theme={{color: {primary: "blue", positive: "red", negative: "green"}}}>
      <ThemeButton >Button</ThemeButton>
    </ThemeProvider>
  );
}