Text disappears if adding styles to markdown text Can't add background color to markdown text-CodePudding

Thanks for taking the time to click on this question! 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:

CodePudding user response：

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>

CodePudding user response：

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.