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

Question

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

1. 消费 React 应用程序运行良好，我可以在该应用程序中创建 Emotion 样式的组件，它运行良好，所有 CSS 样式都应用于应用程序自己的组件。

2. 组件库工作正常，我可以创建 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 中运行良好。

作为补充说明，我最初在使用应用程序自己的组件中看到了相同的错误，并使用 Babel 预设解决了该错误，如下所述： https: //emotion.sh/docs/css-prop

我偶然发现了这个问题/答案，这让我相信我现在遇到的错误发生是因为 Rollup 没有通过 Babel 运行构建： https: //spectrum.chat/emotion/help/solved-css-prop -样式未出现在内置组件中~cb6e75b8-7356-42d0-860b-bb01a26a3d06

经过一番尝试和错误后，我得到了使用 Babel 构建的组件库。但错误仍然存​​在，并且该组件在消费应用程序中使用时，在 CSS prop 内的注释中保持未样式化。

关于如何让组件的 CSS 显示在使用的 React 应用程序中，有什么想法吗？

预先感谢您的任何帮助！

Answer 1

确保你.tsconfig.json有compilerOptions.target: 'es6'和compilerOptions.jsx: "preserve"

你.babelrc应该有：

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