How to Render Raw HTML with Inline Styles in MDX?

[salmanbukhari37]

Hi everyone,

I'm currently facing an issue with MDX where I'm trying to render raw HTML that includes the style attribute, but it's throwing an error:

The style prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.

Here’s a simplified example of what I'm trying to do:

# MDX with Code Files Example

This example demonstrates how to display code files in MDX documents with proper filenames.

## Code Blocks Example


## Information Box Example

<InfoBox title="Note">
  This is an example of a custom component in MDX.
</InfoBox>
<div className='red-color'>This will work in MDX?</div>
<div style='color: red; background-color: gray;'>This style should be transformed from a string!</div>

The issue arises with the style attribute inside the raw HTML. Has anyone faced this issue and found a workaround or solution? Any help would be greatly appreciated!

[remcohaszing]

MDX doesn’t support raw HTML. It supports JSX.

What are you using MDX for? The most common use case is to use it with React. Are you using something else that accepts the style prop as a string?

[salmanbukhari37]

@remcohaszing I’m working on an application that renders markdown content on the UI. Initially, I was using react-markdown, which worked well for basic markdown rendering.

However, as we received more advanced feature requirements from our client — particularly the need to support dynamic components within markdown — I switched to using MDX. MDX has been great for rendering custom React components directly in markdown files.

That said, we now face a challenge with backward compatibility. Our clients already have existing markdown content that includes raw HTML, such as <div> elements with inline style attributes.

Unfortunately, MDX doesn't support raw HTML with inline styles out of the box, which is causing issues when trying to render those elements. If MDX could support raw HTML with inline CSS, it would solve our problem and allow us to maintain compatibility with the existing content.

Have you dealt with this or found a workaround for rendering raw HTML with inline styles in MDX?

[remcohaszing]

The MDX compiler does support raw HTML in markdown content using rehype-raw. It doesn’t support raw HTML in MDX content, as that conflicts with JSX. If you have existing markdown documents, it should work fine. Your example code however, contains JSX, so it’s not markdown.

[salmanbukhari37]

@remcohaszing just to clarify — MDX currently doesn’t support raw HTML with inline style attributes, correct?
Is there any plan to support this in future versions?

[remcohaszing]

The MDX compiler supports 2 languages: markdown and MDX.

The markdown language supports inline HTML. You can use rehype-raw to interpret this. The style attribute is a string. MDX compiles this to a prop with an object value when it compiles the markdown to JSX.

The MDX language supports JSX. The style prop is unprocessed.

React expects the style prop to be an object. It throws the error you’re seeing when it receives style as a string. MDX has nothing to do with this.

You can’t mix HTML and JSX. These syntaxes conflict with each other. Everything works as expected. There are no plans to change the current behaviour.

[salmanbukhari37]

@remcohaszing thanks for the information.