title: How to get Emotion/Rollup/Typescript component CSS to show up in consuming React app?
body: <p>I'm using TypeScript/Emotion/Rollup/Storybook to build a component library meant to be consumed by a React app. A couple preface points:</p>
  <ol>
  <li><p>The <strong>consuming React app</strong> is working fine, and I can create Emotion-styled components within that app, and it works great and all CSS styles are applied to the app's own components.</p>
  </li>
  <li><p>The <strong>component library</strong> is working fine, and I can create Emotion-styled components, open Storybook, and see all the CSS styles applied in the lib's components in Storybook.</p>
  </li>
  </ol>
  <p>However, when I bring components over from my component library <em>into</em> my consuming app, their styles disappear, and upon inspection, the element looks like this:</p>
  <pre><code>&lt;button data-testid=&quot;Button&quot; css=&quot;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).&quot;&gt;Submit&lt;/button&gt;
  </code></pre>
  <p>In other words, the CSS of the component, as created in the component library, does not show up. This same element works <em>fine</em> in the lib's Storybook.</p>
  <p><em>As an additional note, I saw the same error originally in the consuming app's OWN components, and solved it using Babel presets here as described here: <a href="https://emotion.sh/docs/css-prop" rel="nofollow noreferrer">https://emotion.sh/docs/css-prop</a></em></p>
  <p>I stumbled across this question/answer, which led me to believe that the error I'm now experiencing happened because Rollup wasn't running the build through Babel: <a href="https://spectrum.chat/emotion/help/solved-css-prop-styles-not-appearing-in-built-components%7Ecb6e75b8-7356-42d0-860b-bb01a26a3d06" rel="nofollow noreferrer">https://spectrum.chat/emotion/help/solved-css-prop-styles-not-appearing-in-built-components~cb6e75b8-7356-42d0-860b-bb01a26a3d06</a></p>
  <p>After some trial and error, I got the component lib to build using Babel. But the error persists as always, and the component, when used inside the consuming app, remains unstyled with that note inside of the CSS prop.</p>
  <p>Any ideas on how I might get the component's CSS to show up in the consuming React app?</p>
  <p>Thanks in advance for any help!</p>