How to Edit Your CSS With React Markdown?

Hello Folks! Recently I ran into an issue where I needed my CSS to render into a <ReactMarkdown> Component without effecting the styling of non Markdown components on page. Luckily I figured out a way to style the ReactMarkdown Components without affecting everything else on page. Without further to do - lets see how we can get that done! (It might also explain why some of my CSS was not being applied to my React Markdown components correctly!)

React Markdown Has Default Styling

When you use react-markdown without providing a renderers or components prop, it uses its default set of components to render various Markdown elements. For example, a basic usage might look like this

import ReactMarkdown from 'react-markdown';

function MyComponent() {
  const markdownContent = `
    # This is a heading
    Some [markdown](https://example.com) content.
  `;

  return (
    <ReactMarkdown>{markdownContent}</ReactMarkdown>
  );
}

In this case, react-markdown internally uses its default components to render the Markdown content.

How do you load React-Markdown with custom CSS?

If you want to customize the rendering of specific elements, you can provide your own React components using either the renderers or components prop. These components will then be used to render the corresponding Markdown elements.

Using Renderers Prop

import React from 'react';
import ReactMarkdown from 'react-markdown';

function MyComponent() {
  const markdownContent = `
    # This is a heading
    Some [markdown](https://example.com) content.
  `;

  const renderers = {
    link: (props) => (
      <a style={{ color: 'red' }} {...props}>
        {props.children}
      </a>
    ),
  };

  return (
    <ReactMarkdown renderers={renderers}>{markdownContent}</ReactMarkdown>
  );
}

Using Components Prop

import React from 'react';
import ReactMarkdown from 'react-markdown';

function MyComponent() {
  const markdownContent = `
    # This is a heading
    Some [markdown](https://example.com) content.
  `;

  const LinkComponent = (props) => (
    <a style={{ color: 'red' }} {...props}>
      {props.children}
    </a>
  );

  const components = {
    link: LinkComponent,
  };

  return (
    <ReactMarkdown components={components}>{markdownContent}</ReactMarkdown>
  );
}

In both cases, the link element is customized to render as a red link. You can similarly customize other elements by providing your own components for different Markdown elements. You can Refer to the offical react-markdown documentation for more guidance.

FAQ

So Renderers and Components Prop are Similar?

Yes, the renderers and components props in react-markdown serve a similar purpose, allowing you to customize the rendering of specific Markdown elements by providing your own React components.

The components prop was introduced in later versions of react-markdown. It is essentially an alias for the older renderers prop, providing a more intuitive and consistent API. The components prop accepts an object where each key corresponds to a Markdown element type (e.g., 'p' for paragraphs, 'h1' for headings, 'a' for links), and the values are your custom React components.

You can choose the one that you find more readable or the one that is supported by the version of react-markdown you are using. In newer versions, it's recommended to use the components prop for consistency.

Conclusion

If you would like to read more programming blogs be sure to checkout more programming blogs