How can I render only one part of markdown differently?

[sai-sy]

I'm using react-markdown to render Strapi RichText. I want to render only quotes differently and not everything else

This is how I render QuoteBlocks but I want quotes within RichText blocks to also render like this:
QuoteBlock.tsx

const QuoteBlock: React.FC<QuoteBlockProps> = ({ title, body, backgroundColor, className }) => {
  return (
    <blockquote
      className={twMerge('border-l-4 border-gray-300 px-8 py-4 bg-gray-100', className)}
      style={backgroundColor ? { background: backgroundColor } : undefined}
    >
      {title && <strong className="block mb-2 font-semibold">{title}</strong>}
      <span>{body}</span>
    </blockquote>
  );
};

export default QuoteBlock; 

[sai-sy]

I realize I can just target blockquotes through css but am still curious if there's a react-markdown native way to implement

[Kaleshi26]

You can override only the blockquote element using the components prop in react-markdown, so it renders your custom QuoteBlock while leaving other elements untouched. Example:

import ReactMarkdown from 'react-markdown';
import QuoteBlock from './QuoteBlock';

<ReactMarkdown
  components={{
    blockquote: ({ node, children }) => (
      <QuoteBlock body={children} />
    ),
  }}
>
  {content}
</ReactMarkdown>

This way, only quotes (> ...) in your Strapi RichText render with your QuoteBlock component, everything else stays default.