javascript - 启用带有情感的全局主题？

Question

我关注了https://github.com/emotion-js/emotion/issues/546其中 Emotion 的作者 Kye 提到了一个解决方案，虽然我没有完全理解。

所以我做了一个小CodeSandBox实现问题中提供的详细信息。如何让 background-color 主题在 injectGlobal 中工作？

Answer 1

为使用情绪 10 的人们更新:

import React from 'react'
import { useTheme, ThemeProvider } from 'emotion-theming'
import { css, Global } from '@emotion/core'

const GlobalStyles = () => {
  const theme = useTheme()
  return (
    <Global styles={css`
      body {
        background: ${theme.bg};
      }
    `} />
  )
}


const App = () => (
  <ThemeProvider theme={{ bg: 'tomato' }}>
    <main>
      <h1>Hi</h1>
      <GlobalStyles />
    </main>
  </ThemeProvider>
)