javascript - 用情感启用全球主题？

Question

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

所以我做了一个小的CodeSandBox来实现问题中提供的细节。我怎样才能使background-color主题工作injectGlobal？

标签： javascriptcssreactjsstyled-componentsemotion

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>
)