reactjs - 在 React 中使用 Emotion 的内联 CSS

Question

从广义上讲，我似乎在 Emotion 文档中发现了差异。在介绍页面上，我们介绍了使用以下语法的样式组件，

import { css, cx } from 'emotion'

const color = 'white'

render(
  <div
    className={css`
      padding: 32px;
      background-color: hotpink;
      font-size: 24px;
      border-radius: 4px;
      &:hover {
        color: ${color};
      }
    `}
  >
    Hover to change color.
  </div>
)

我想指出，通过以下语法添加内联 CSS 的方式，

className={css` <- CSS Goes Here ->`}

但是，当我们在应用程序中实现时，此语法无法正常工作。进一步阅读文档，特别是 CSS Prop 页面，我们发现了这种语法，

/** @jsx jsx */
import { jsx } from '@emotion/core'

render(
  <div
    css={{
      backgroundColor: 'hotpink',
      '&:hover': {
        color: 'lightgreen'
      }
    }}
  >
    This has a hotpink background.
  </div>
)

或者，为了清楚起见，

css={{ <- CSS Goes Here -> }}

这种格式开箱即用，这让我想知道，为什么这个格式有效而前者无效？我们错过了什么吗？有人可以解释两者之间的区别吗？