在React中使用Emotion内联CSS

问题描述

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

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 ->`}

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

/** @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 -> }}

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）