Tengo este problema muy extraño con el descuento de React.
Dentro de este código:
<ReactMarkdown className={styles.reactMarkDown} escapeHtml={false} components={renderers} > {content} </ReactMarkdown> Estoy tratando de agregar un color de fondo al texto de descuento ( content ). Dentro de styles.reactMarkDown , hay background-color: #some-color . Desafortunadamente, el color de fondo no se agrega. Verifiqué que la regla CSS se está cargando porque la fuente personalizada allí se está cargando.
Traté de evitar esto usando un elemento <span> :
<ReactMarkdown className={styles.reactMarkDown} escapeHtml={false} components={renderers} > <span className="bg-postbg text-white">{content}</span> </ReactMarkdown>Pero luego el texto desaparece. He intentado buscar durante un tiempo, y nada se le acerca. ¿Qué estoy haciendo mal?
Aquí hay una imagen de lo que está pasando:
Debe envolver el ReactMarkdown con un div y aplicarle el estilo.
<div > <ReactMarkdown // apply background property inside this className className={styles.reactMarkDown} escapeHtml={false} components={renderers} > {content} </ReactMarkdown> </div>Resulta que fui un idiota y no usé mis procesadores correctamente. Para cualquier otra persona que tropiece con esta publicación, agregue
const renderers = { p: (props) => <p className={styles.reactMarkDown}>{props.children}</p> }o cualquier hoja de estilo que estés usando. Accidentalmente lo nombré párrafo.