如何让 Emotion/Rollup/Typescript 组件 CSS 出现在消费 React 应用程序中？
How to get Emotion/Rollup/Typescript component CSS to show up in consuming React app?
我正在使用 TypeScript/Emotion/Rollup/Storybook 构建一个组件库，供 React 应用程序使用。几个序言点：
consuming React 应用程序 运行良好，我可以在该应用程序中创建 Emotion 风格的组件，它运行良好 CSS 样式应用于应用程序自己的组件。
组件库工作正常，我可以创建 Emotion 风格的组件，打开 Storybook，并查看应用的所有 CSS 样式在 Storybook 的库组件中。
但是，当我将组件从我的组件库 带入我的消费应用程序 时，它们的样式消失了，经过检查，元素看起来像这样：
<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 没有显示出来。同样的元素在库的 Storybook 中很好。
作为附加说明，我最初在消费应用程序的 OWN 组件中看到了相同的错误，并按照此处所述使用 Babel 预设解决了它：https://emotion.sh/docs/css-prop
我偶然发现了这个 question/answer，这让我相信我现在遇到的错误是因为 Rollup 不是 运行 通过 Babel 构建的：https://spectrum.chat/emotion/help/solved-css-prop-styles-not-appearing-in-built-components~cb6e75b8-7356-42d0-860b-bb01a26a3d06
经过反复试验，我得到了要使用 Babel 构建的组件库。但是错误一如既往地存在，并且组件在使用中的应用程序中使用时，在 CSS prop.
关于如何让组件的 CSS 显示在消费 React 应用程序中的任何想法？
在此先感谢您的帮助！
确保您的 .tsconfig.json 有 compilerOptions.target: 'es6' 和 compilerOptions.jsx: "preserve"
你的 .babelrc 应该有：
"presets": [
"@babel/preset-react",
"@emotion/babel-preset-css-prop"
],
我正在使用 TypeScript/Emotion/Rollup/Storybook 构建一个组件库，供 React 应用程序使用。几个序言点：
consuming React 应用程序 运行良好，我可以在该应用程序中创建 Emotion 风格的组件，它运行良好 CSS 样式应用于应用程序自己的组件。
组件库工作正常，我可以创建 Emotion 风格的组件，打开 Storybook，并查看应用的所有 CSS 样式在 Storybook 的库组件中。
但是，当我将组件从我的组件库 带入我的消费应用程序 时，它们的样式消失了，经过检查，元素看起来像这样：
<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 没有显示出来。同样的元素在库的 Storybook 中很好。
作为附加说明，我最初在消费应用程序的 OWN 组件中看到了相同的错误，并按照此处所述使用 Babel 预设解决了它：https://emotion.sh/docs/css-prop
我偶然发现了这个 question/answer，这让我相信我现在遇到的错误是因为 Rollup 不是 运行 通过 Babel 构建的：https://spectrum.chat/emotion/help/solved-css-prop-styles-not-appearing-in-built-components~cb6e75b8-7356-42d0-860b-bb01a26a3d06
经过反复试验，我得到了要使用 Babel 构建的组件库。但是错误一如既往地存在，并且组件在使用中的应用程序中使用时，在 CSS prop.
关于如何让组件的 CSS 显示在消费 React 应用程序中的任何想法？
在此先感谢您的帮助！
确保您的 .tsconfig.json 有 compilerOptions.target: 'es6' 和 compilerOptions.jsx: "preserve"
你的 .babelrc 应该有：
"presets": [
"@babel/preset-react",
"@emotion/babel-preset-css-prop"
],