@styled-system/css inside MDX

[johngrasty]

Hello again,

Should the css prop work inside of MDX?

I have attempted to use it in both a normal MDX file and one that I was using MDX-blocks with.

Thanks.

[jxnblk]

I might be wrong, but I think it depends on how you've set up the css prop. I think the babel preset works, but the custom pragma (currently) can't be used together with MDX's custom pragma, see https://emotion.sh/docs/css-prop

[johngrasty]

I will experiment some more and try to put together a MWE. Currently it's not working in my one project with the babel preset, but who knows what else might be effecting that. I'll try to get back to you. Thank you for your response.

[johngrasty]

Well, so far, no luck. If I import a component using the css prop, it renders just fine.

If I actually write in the mdx file something with the css prop, I get the error below in the browser console. I tested this in a stripped down Gatsby site that has the emotion plugin (which if I understand correctly, adds the correct babel preset for the css prop).

<div
  css={css({
    fontSize: '32px',
    borderBottom: '2px solid tomato',
  })}
>
  This is a test.
</div>

Error in the console:

index.js:2177 Warning: Invalid value for prop `css` on <div> tag. Either remove it from the element, or pass a string or number value to keep it in the DOM. For details, see https://fb.me/react-attribute-behavior
    in div (created by MDXCreateElement)
    in MDXCreateElement (at pages/index.mdx:32)
    in div (created by Context.Consumer)
    in StaticQuery (created by _default)
    in _default (at pages/index.mdx:19)
    in MDXLayout (at pages/index.mdx:25)
    in MDXContent (created by HotExportedMDXContent)
    in AppContainer (created by HotExportedMDXContent)
    in HotExportedMDXContent (created by PageRenderer)
    in PageRenderer (created by JSONStore)
    in JSONStore (created by EnsureResources)
    in ScrollContext (created by EnsureResources)
    in RouteUpdates (created by EnsureResources)
    in EnsureResources (created by RouteHandler)
    in RouteHandler (created by Root)
    in div (created by FocusHandlerImpl)
    in FocusHandlerImpl (created by Context.Consumer)
    in FocusHandler (created by RouterImpl)
    in RouterImpl (created by LocationProvider)
    in LocationProvider (created by Context.Consumer)
    in Location (created by Context.Consumer)
    in Router (created by Root)
    in Root
    in a (created by Component)
    in MDXScopeProvider (created by Component)
    in Component (created by Component)
    in Component
    in _default