How do I style MarkDown content in nextJs?

Question

I'm using markdown-it to digest markdown and send html back, this works nicely however I have an issue with styles, here's my code on a Nextjs project:

         <h1 className="text-3xl mb-3 leading-snug display-6" 
          > {currentPost.title}</h1>

          <article style={{
            fontFamily: "Helvetica,Arial,sans-serif",
            color: "#666",
            fontSize:"16px"
          }} 
          dangerouslySetInnerHTML={{ __html: md.render(currentPost.content) }} 
          />

Out of my posts I have data that is composed of h2, h3, ul, li and I would like to style these elements specifically (inside the

Apparently I'm not able to create styles in Nextjs, and and limited knowledge of CSS blocks me from having any idea on how to target these elements for styling.

Any help appreciated ! Thanks

Answer 1

1. Add an id or className attribute to the <article> element.

Here is an example with id="htmlContent" .

<article 
   id="htmlContent"
   dangerouslySetInnerHTML={{ __html: md.render(currentPost.content) }} 
/>

2. Use the Elements tab in the inspector developer tools to see how the html elements nested inside <article #htmlContent> element are structured.

3. In styles/global.css , you can add styles using the id or class selector generally speaking. For your case, add styles to the html elements nested inside the #htmlContent selector by using element > element syntax to style elements nested inside the #htmlContent element based on the structure you saw in step 2.

Here is an example using an id selector.

#htmlContent > h2 {
  color: blue;
  font-size: 28px;
}

#htmlContent > p > a {
  color: red;
  text-decoration: none;
}

Here is an example that implements this approach to style h4 and h5 headings into the blue and purple callouts.

Good luck and remember it takes some trial and error but once you get used to the css syntax and using the elements tab in the inspector, you can do some cool stuff.