How to style paragraph?

[paymog]

I currently have some JSX that looks like

                        <li
                          style={{ fontWeight: 'normal', fontSize: '13px' }}
                          key={index}
                        >
                          {educationBullet}
                        </li>

Where educationBullet is some variable with string content. When this gets rendered I see the following on my site, as an example.

I'd like to support adding links in these education bullets using markdown. I've managed to be able to install and import react-markdown but when I use it I get different styling (notice the margin and letter spacing differences):

                        <li
                          style={{ fontWeight: 'normal', fontSize: '13px' }}
                          key={index}
                        >
                          <ReactMarkdown >{educationBullet}</ReactMarkdown>
                        </li>

I've tried writing a custom renderer that returns a <p> element with the right styling

const renderers = {
  paragraph: (value: any) => {
    console.log(value)
    return (
      <p style={{fontSize: '13px', letterSpacing: '0px'}}>{value.children[0].props.value}</p>
    )
  },
}

but I'm realizing that the above renderer won't work correctly with content that has links like This is [a link](www.google.com) because the link is a different element in the children array. It looks like my renderer will have to be recursive in order to render all possible markdown correctly which tips me off that I might be approaching this problem incorrectly.

Is there a simple way to add styling to the elements created by react-markdown? Ideally, I'd like to use Styled Components if possible.

[wooorm]

why not do <p style={{fontSize: '13px', letterSpacing: '0px'}}>{value.children}</p>?

[paymog]

That's a great question! I didn't think of that but after testing it out that's exactly what I'm looking for! Thank you 😄