0
244
ViewsText disappears if adding styles to markdown text + Can't add background color to markdown text
I'm having this very odd issue with React markdown.
Inside of this code:
<ReactMarkdown
className={styles.reactMarkDown}
escapeHtml={false}
components={renderers}
>
{content}
</ReactMarkdown>
I am trying to add a background color to the markdown text (content). Inside of styles.reactMarkDown, there is background-color: #some-color. Unfortunately, the background color doesn't get added. I've verified that the CSS rule is actually loading because the custom font in there is loading.
I tried to get around this using a <span> element:
<ReactMarkdown
className={styles.reactMarkDown}
escapeHtml={false}
components={renderers}
>
<span className="bg-postbg text-white">{content}</span>
</ReactMarkdown>
But then the text disappears. I've tried searching for a while, and nothing comes close to it. What am I doing wrong?
Here's an image of what's going on:
2 answers
Answer question0
You should wrap the ReactMarkdown with a div and apply the style to it.
<div >
<ReactMarkdown
// apply background property inside this className
className={styles.reactMarkDown}
escapeHtml={false}
components={renderers}
>
{content}
</ReactMarkdown>
</div>
0
Turns out I was an idiot and didn't use my renderers correctly. For anyone else stumbling upon this post, add
const renderers = {
p: (props) => <p className={styles.reactMarkDown}>{props.children}</p>
}
or whatever stylesheet you're using. I accidentally named it paragraph.