2

在 Emotion v10 中，文档说“如果你从 @emotion/css/macro 导入它，那么 @emotion/core 有一个可用于 css 的 Babel 宏。” 这显然适用于无法更改其 babel 配置的用户。

假设你没有使用 JSX pragma 或 babel 插件，这个宏有什么意义，你如何使用它？

在一个新的create-react-app应用程序中，我可以import css from '@emotion/css/macro';，甚至使用css标记模板，但是我应该如何处理它的返回值（一个带有name和样式文本的对象）并不明显。如果没有编译指示或插件，我将无法访问css={}道具。

4

1 回答 1

0

create-react-app 只有在使用编译jsx指示（以及jsx命名的 import from @emotion/core.

资料来源：Emotion 的css prop文档

/** @jsx jsx */

import { jsx } from "@emotion/core";
import css from "@emotion/css/macro";

export function Home() {
  return (
    <div
      css={css`
        max-width: 1080px;
        margin: 0 auto;
      `}
    >
      <p>the css macro only works with the JSX pragma</p>
    </div>
  );
}

或者，您可以使用原版emotion css导出并将返回值应用于className道具：

import React from "react";
import { css } from "emotion";

export function Home() {
  return (
    <div
      className={css`
        max-width: 1080px;
        margin: 0 auto;
      `}
    >
      <p>hello new page</p>
    </div>
  );
}
于 2020-10-06T02:59:18.093 回答