如何让 Emotion/Rollup/Typescript 组件 CSS 显示在使用 React 应用程序中？答案

【问题标题】：How to get Emotion/Rollup/Typescript component CSS to show up in consuming React app?如何让 Emotion/Rollup/Typescript 组件 CSS 显示在使用 React 应用程序中？
【发布时间】：2020-10-30 10:41:31
【问题描述】：

我正在使用 TypeScript/Emotion/Rollup/Storybook 构建一个组件库，供 React 应用使用。几个前言点：

使用 React 应用程序运行良好，我可以在该应用程序中创建 Emotion 样式的组件，它运行良好，所有 CSS 样式都应用于应用程序自己的组件。
组件库运行良好，我可以创建 Emotion 样式的组件，打开 Storybook，然后在 Storybook 中查看应用到库组件中的所有 CSS 样式。

但是，当我将组件从组件库中引入我的消费应用程序时，它们的样式消失了，并且经过检查，元素看起来像这样：

<button data-testid="Button" css="You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).">Submit</button>

换句话说，在组件库中创建的组件的 CSS 不会显示出来。在 lib 的 Storybook 中，同样的元素很好工作。

作为附加说明，我最初在消费应用程序的 OWN 组件中看到了相同的错误，并在此处使用 Babel 预设解决了它，如下所述：https://emotion.sh/docs/css-prop

我偶然发现了这个问题/答案，这让我相信我现在遇到的错误是因为 Rollup 没有通过 Babel 运行构建：https://spectrum.chat/emotion/help/solved-css-prop-styles-not-appearing-in-built-components~cb6e75b8-7356-42d0-860b-bb01a26a3d06

经过反复试验，我得到了使用 Babel 构建的组件库。但是错误仍然存在，并且当在消费应用程序中使用该组件时，该组件在 CSS 属性内的该注释保持未设置样式。

关于如何让组件的 CSS 显示在使用 React 应用程序中的任何想法？

提前感谢您的帮助！

【问题讨论】：

你有没有想过这个问题？你是同时使用 babel 和 typescript 编译器，还是只使用 babel？我正在努力让它发挥作用，但似乎无法弄清楚配方
@timmyc 你能分享你的仓库吗，我需要在 next.js 应用程序中发布我的故事书应用程序。这对我有帮助。

标签： reactjs typescript babeljs rollup emotion

【解决方案1】：

确保您的.tsconfig.json 具有compilerOptions.target: 'es6' 和compilerOptions.jsx: "preserve"

你的.babelrc 应该有：

  "presets": [
    "@babel/preset-react",
    "@emotion/babel-preset-css-prop"
  ],

【讨论】：