Pass custom <p> inside <blockquote>

[valerioleo]

Hey, I'm new to MDX and I am trying to customise my components. I followed the example from gatsby docs and got something like this:

import Typography from '../Typography';
import BlockQuote from '../BlockQuote';

<MDXProvider
    components={{
      p: props => <Typography {...props} paragraph variant='body2'/>,
      blockquote: BlockQuote
    }}
// ...

The BlockQuote component, is just a div with a yellow background.

The current behaviour is that, when I have a quote in my .md files, it wraps my custom <p> component with my custom BlockQuote. As a result, the quote and the rest of the paragraphs have identical style, except that quote have a different background.

I am looking for a way to directly customise the <p> that is passed inside the quoteblocks. Is this possible?

Thanks for any help!

[ChristianMurphy]

A couple possible approaches:

1. rather than solving with JS, solve the problem with CSS, .custom-block-quote-classname p {/* some styles*/} could be used to style p just within the custom component
2. If you do specifically want to style in JS, consider writing a plugin https://mdxjs.com/guides/writing-a-plugin which replaces p with CustomParagraph only when it's wrapped in blockquote