How to allow string style prop (instead of object)

[zachkirsch]

Hello!

I'm rendering third-party mdx which sometimes has custom styles, e.g. <div style="color: red">Hello</div>. Because the style prop is just a string, this causes a downstream react error when I render: Error: The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.

Any tips for how I can allow + apply those string styles to the rendered mdx? If relevant: I'm using next-mdx-remote to render the mdx.

Sorry if this doesn't belong here or if the question has been asked before - I looked around but didn't find anything. I did find #145 but not a resolution.

[wooorm]

You should get those people to fix their MDX!
This isn’t really about MDX: it’s about React. Some other frameworks that are supported by MDX do allow that. But React doesn’t. So, you need to make sure that your JSX works with your framework!

[ChristianMurphy]

Welcome @zachkirsch! 👋
I assume you are using React?

MDX is Markdown and JSX.
When used with React, React only accepts style as an object.
I'd generally recommend sticking with React's convention.

That said, if you really want to change that behavior to accept a string.
You'd need to get into the parsing and abstract syntax tree internals.
I'd recommend starting by reading https://unifiedjs.com/learn/
Then playing around with https://mdxjs.com/playground/ to familiarize yourself with the 3 syntax trees MDX uses.

You could create a recma plugin to modify the esast (JavaScript) syntax tree.
Find the style attributes which are a string, and use a CSS parser to transform that text into a React style object.
Similar to how existing CSS in JS projects like: emotion, styled-components, etc do.

[zachkirsch]

Amazing thank you both!