Я использую TypeScript / Emotion / Rollup / Storybook для создания библиотеки компонентов, предназначенной для использования приложением React. Пара предисловий:
Приложение React работает нормально, и я могу создавать компоненты в стиле Emotion внутри этого приложения, и оно отлично работает и все CSS стиля применяются к собственным компонентам приложения.
Библиотека компонентов работает нормально, и я могу создавать компоненты в стиле эмоций, открывать 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 библиотеки.
В качестве дополнительной заметки я видел ту же ошибку изначально в СОБСТВЕННЫХ компонентах потребляющего приложения и решил ее, используя здесь предустановки 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 prop.
Любые идеи о том, как я могу получить CSS компонента для появляются в потребляющем приложении React?
Заранее благодарим за любую помощь!