CODEWITHSUNDEEP
javascriptcssreactjsnext.jsmarkdown
user17066118
user17066118

Reputation:

Text 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:

A background is not being applied.

Upvotes: 0

Views: 1369

Answers (2)

user17066118
user17066118

Reputation:

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.

Upvotes: 0

Yilmaz
Yilmaz

Reputation: 49729

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>

Upvotes: 0

Related Questions