javascript - Emotion CSS 宏有什么作用，我该如何使用它？

Question

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

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

在新的 create-react-app 应用程序中，我可以从 '@emotion/css/macro'; 导入 css;，甚至可以使用 css 标记的模板，但我应该如何处理它的返回值(具有 name 和样式文本的对象)并不明显。没有 pragma 或插件，我无法访问 css={} 属性。

Answer 1

它似乎在新的 create-react-app 中只有在使用 jsx pragma(以及名为 import from @emotion/core.

来源:Emotion's css prop docs

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

或者，您可以使用 Vanilla emotion css 导出并将返回值应用到 className prop:

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