Styling markdown text causes the text to vanish and it is impossible to include a background color

I'm facing a puzzling React markdown problem.

Within this snippet:

<ReactMarkdown
    className={styles.reactMarkDown}
    escapeHtml={false}
    components={renderers}
>

    {content}

</ReactMarkdown>

I am attempting to apply a background color to the markdown text (content). The background-color: #some-color rule in styles.reactMarkDown doesn't seem to work. I have confirmed that the CSS rule is being applied as the custom font specified in it is displayed correctly.

To work around this issue, I tried using a <span> element:

<ReactMarkdown
    className={styles.reactMarkDown}
    escapeHtml={false}
    components={renderers}
>
    
    <span className="bg-postbg text-white">{content}</span>
    
</ReactMarkdown>

However, this causes the text to disappear entirely. Despite searching extensively, I haven't found a solution. What could be causing this unexpected behavior?

Take a look at this image for reference:

https://i.sstatic.net/N3Mxc.png

javascriptcssreactjsnext.jsmarkdown

Answer №1

It is recommended to enclose the ReactMarkdown component within a div element and then style it accordingly.

<div  >
    <ReactMarkdown
       // add background property to the className specified here
       className={styles.reactMarkDown}
       escapeHtml={false}
       components={renderers}
    >
       {content}
   </ReactMarkdown>
</div>

Answer №2

It seems I made a foolish mistake by not utilizing my renderers properly. If you happen to come across this post, remember to include:

const renderers = {
    p: (props) => <p className={styles.reactMarkDown}>{props.children}</p>
}

in your code, substituting the stylesheet as needed. I mistakenly labeled it paragraph.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the process for setting up a server with Node.js?

After diving into my nodejs studies, I hit a roadblock at the point where I was supposed to create a server. Here's the code snippet for this particular script: var http = require('http'); // Import Node.js core module var server = http.cre ...

javascriptnode.jshttpservernodejs-server

Utilizing a form on numerous occasions prior to its submission

As a newcomer to JavaScript, I am exploring the best approach for a specific task. The task involves a form with checkboxes representing different music styles and a selector for names of people. The goal is to allow users to select music styles for mult ...

javascriptjquerydjangoformsjavascript-databinding

Typescript is throwing a fit over namespaces

My development environment consists of node v6.8.0, TypeScript v2.0.3, gulp v3.9.1, and gulp-typescript v3.0.2. However, I encounter an error when building with gulp. Below is the code snippet that is causing the issue: /// <reference path="../_all.d. ...

javascriptnode.jstypescriptgulp

Embed the picture into the wall

I recently constructed a wall using three.js and would like to add an image similar to the one shown in the example below. Since I am still new to three.js, I am seeking assistance with placing the image. Can anyone provide guidance on how to do this? ...

javascriptthree.js

Running code sequentially in a Node.js controller

Recently delved into the world of Node.js, and I'm currently tackling the challenge of running this code synchronously in my controller. Quest.js async function create(req, res, next) { const formValue = req.body['form']; ...

javascriptnode.js

Leverage the spread operator (or an equivalent method) to transfer all attributes from a solitary mixin

When working with the example below, my goal is to pass only the properties of MyMixedInProps to MyChildComponent using a method similar to the spread operator ({...props}). In my specific scenario, MyMixedInProps is defined in a third-party library (whic ...

reactjstypescript

Script for migrating MongoDB attributes to an array

I am in the process of creating a database migration, and the current structure is as follows: { "site" : { "name" : "siteName1" }, "subStages" : [ "subStage1", "s ...

javascriptnode.jsmongodbmigration

An issue arises in Slate.js when attempting to insert a new node within a specified region, triggering an error

A relevant code snippet: <Slate editor={editor} value={value} onChange={value => { setValue(value); const { selection } = editor; // if nothing is currently selected under the cursor if (select ...

javascriptreactjstypescriptslate.js

I could use some assistance with accessing the /results page on the OMDb API following a movie search by

Presented here is my app.js code. My objective is to develop a movie search feature that enables me to look up a movie in a database and retrieve results for 10 movies related to the entered keyword. For instance, if I input "ALABAMA", the system should re ...

javascriptnode.jsexpressaxiosomdbapi

PHP and JavaScript both offer methods for escaping variables that are written in the syntax ${HOST}

How can I safely handle variables from the database like ${HOST}? This issue arises when code is posted within <pre><code> tags. If left as it is, an error occurs: Uncaught ReferenceError: HOST is not defined. In this specific context, usin ...

javascriptphp

Switch up the order of columns by utilizing the push and pull features of Bootstrap

My layout consists of 3 columns arranged like this: <div class="container-fluid"> <h1>Hello World!</h1> <p>Resize the browser window to see the effect.</p> <div class="row"> <div class="col-sm-3">left co ...

htmlcsstwitter-bootstrap-3responsive-design

Issue with an external library in Angular 2

After generating my Angular 2 library using the yeoman generator and adding it to my main Angular project, I encountered errors when running the app in production mode. The specific errors include: WARNING in ./src/$$_gendir/app/services/main/main.compone ...

javascriptangularlib

The Vue JS application is experiencing an issue with the Node JS (Express) server as it lacks the necessary 'Access-Control-Allow-Origin' header on the requested resource

I've been using Vue.js for the frontend and Node.js (Express) for the backend. Despite trying numerous solutions found online, I'm still unsure about what's causing the issue. Note: I am using the build or production version (dist) of Vue.j ...

javascriptnode.jsvue.jsexpresscors

What is the best way to customize multiple checkboxes in React Native?

I need help with implementing checkboxes in my app using react-native-check-box. I have tried creating 4 checkboxes, but the text inside them is not aligning properly. The boxes are rendering one above the other instead of staying on the same line. I want ...

javascriptreactjsreact-nativecheckboxecmascript-6

connect to new database using mysqli_find_cat

<?php $host = "localhost"; $username = "root"; $password = ""; $db = "mineforums"; $connect = mysqli_connect($host, $username, $password, $db) or die(mysqli_error($connect)); ?> Here is the PHP snippet that connects to my databa ...

phphtmlmysqlcss

Is it possible to refresh the options for a select in AngularJS when they are in different controllers?

Two separate controllers are being used here; one for language, known as `langCntl`, and one for words, referred to as `wordCntl`. Within the `wordCntl` controller, there is an attribute called `ln`. This attribute is displayed in a form using `ng-select` ...

javascriptangularjsangularjs-scope

Refreshing Ads JavaScript and Ad Placements with NextJS Navigation

My NextJS website utilizes a custom JavaScript provided by an ad provider for running ads. The script is typically structured like this: <script type="text/javascript" src="//cdn.adsite.com/static/js/ad.js" ></script> In ad ...

javascriptnext.js

Could someone confirm if this NextJS scss module is functioning correctly, or is there an issue on my end

Within my project, I am utilizing a pagination.tsx component in conjunction with a pagination.module.scss file which houses the following styles: .pagination { ul { display: inline-block; padding-left: 0; margin: 20px 0; border-radius: 4p ...

reactjsnext.jssass

Issues with validating and executing Javascript (HTML5 canvas)

Currently, I am tasked with creating a 3D application using HTML5 canvas for one of my courses. To achieve this, I decided to utilize Three.js. My initial goal is to render a simple plane and allow the camera to move along the x-axis when the mouse button ...

javascripthtmlcanvasjslintthree.js

Automatically modify browser configurations to disable document caching

Is it possible to prevent browsers from caching pages using JavaScript? I've noticed that even though PHP has a redirection implemented once the user logs in, when they press the browser's history button, it goes back to the login form. This is b ...

javascripthtml