Specifically style elements inside MDX - Qwik

[thejackshelton]

Can we wrap over / specifically style elements inside MDX only?

Hey awesome MDX contributors / community! Would love your help on this.

We're currently working on the documentation for Qwik UI, an open source component library for Qwik that uses MDX.

https://qwik.builder.io/docs/guides/mdx/

I believe Qwik uses MDX directly.

---

Currently we have our docs styled using global CSS, but we would like to have these styles only for elements inside of MDX.

We currently have some pages that aren't using MDX, and would like to have styles for those as well without the MDX styles affecting the page.

Is this possible to do out of the box? Or would we need a framework specific integration?

A contributor pointed out that this might be possible with a "wrapper". My current mental model is something like this:

// MDX provider for Qwik?

// Map over components
const components = {
  h1: props => <H1 {...props} />,
  // Add more mappings as needed
};

const MDXWrapper = () => {
  return (
    <MDXProvider components={components}>
      <Slot />
    </MDXProvider>
  );
};

export default MDXWrapper;

I've been looking around and haven't been able to find a similar example.

Qwik is similar to React.js in many ways (it uses JSX), but also completely different in a bunch too. The reason I bring this up, is I see a React specific integration for MDX. Would Qwik need one as well?

Maybe there's some similar React implementation examples I can look at?

Would love it if someone could guide us in the right direction!

[wooorm]

Hi!

Most likely, you don’t need providers. You can pass components:

import Content from './some/mdx/file.mdx'

const components = {
  h1: H1
};

<Content components={components} />

This is at the framework level, where frameworks are things like React/Preact/Vue/etc.

If the term framework here means alternatives to Next.js, something will load MDX files for you.
There is likely a place where you can integrate between importing those and calling those:

const components = {
  h1: H1
};

export default function Page(Content) => {
  return <Content components={components} />
}