CODEWITHSUNDEEP
htmlcssreactjsreact-markdown
bros
bros

Reputation: 329

How to add styling for elements in react-markdown?

I am passing various amounts of data in react markdown sich as tables, lists and h tags. I wanted to know how to style each element separately. I searched everywhere but there is no mention of how to style the elements other than just bold or emphasize, etc. I thought I could pass a class name in the ReactMarkdown component to style it but would that not just provide styling only for the component. How do I style the various elements within it?

const ReadMePreviewer = ({ readMeCode }) => {
  return (
    <ReactMarkdown
      plugins={[[gfm, { singleTilde: false }]]}
      className={style.reactMarkDown}
      // className={style.reactMarkDownRemovingExtraGlobal}
      renderers={renderers}
      source={readMeCode}
    />
  );
};

Upvotes: 12

Views: 31571

Answers (4)

Madrus
Madrus

Reputation: 746

This is how I would make it work for me. I do it explicit with CSS and not, e.g., SCSS or CSS-in-JS so as not to bother you with extra libraries nor webpack/babel finetuning:

Create a separate markdown-styles.module.css CSS-module file with your styles, e.g.,

.reactMarkDown {
  // some root styles here
}

.reactMarkDown ul {
  margin-top: 1em;
  margin-bottom: 1em;
  list-style: disc outside none;
}

.reactMarkDown ul li {
  margin-left: 2em;
  display: list-item;
  text-align: -webkit-match-parent;
}
 .reactMarkDown p { 
  font-size: 14px;
  font-weight: 400; 
  white-space: pre-wrap;
}
// your other styles but all under .reactMarkDown blocks

Then you can import it in your component and use as you did:

import style from './markdown-styles.module.css';
...

const ReadMePreviewer = ({ readMeCode }) => {
  return (
    <ReactMarkdown
      plugins={[[gfm, { singleTilde: false }]]}
      className={style.reactMarkDown}
      renderers={renderers}
      children={readMeCode}
    />
  );
};

Upvotes: 28

BDurand
BDurand

Reputation: 460

I use tailwindcss in my application so I adapted @Madrus answer to use tailwind in my css, using the @apply directive : https://tailwindcss.com/docs/functions-and-directives#apply

Example :

 <Markdown className={style.reactMarkDown}>{post.body}</Markdown>

.reactMarkDown h3{
    @apply font-geist-bold;
}

.reactMarkDown p{
    @apply py-1
}

(font-geist-bold is a custom font from my tailwind.config.js)

Upvotes: 1

Jeremy Thompson
Jeremy Thompson

Reputation: 65712

ReactMarkdown (without a CSS) render as P elements, therefore if you wrap the <ReactMarkdown in Div with a CSS and leave the <ReactMarkdown without a ClassName, then you can use the Div to set the P elements style:

.markdown p {
  display: inline !important;
  border: 1px solid red;
}

BAD:

 <div className="markdown">
  <b>Description:</b>
  <ReactMarkdown className="markdown" children={result.Description} rehypePlugins={[rehypeRaw]} />
  </div>

GOOD:

 <div className="markdown">
  <b>Description:</b>
  <ReactMarkdown children={result.Description} rehypePlugins={[rehypeRaw]} />
  </div>

Upvotes: 1

atazmin
atazmin

Reputation: 5707

This seem to work to wrap into new line

App.css

.markdown code {
  display: block;
  white-space: pre-wrap;
}

Component:

<ReactMarkdown className="markdown">{page.Content}</ReactMarkdown>

Upvotes: 5

Related Questions