CSS applied to RichText paragraph tags not rendering

[asummers (Ashley Summers)]

I am using a multi-paragraph RichText field on my document model. The generated source shows it is correctly rendering the

tags, however the styles for p tags in the are not being applied to the generated paragraphs.

<div className="xyz">
  <RichText render={slice.primary.description} />
</div>
<style jsx>{`
.xyz p {
  margin-bottom: 40px;
  line-height: 40px;
}
`}</style>

They should have a line height and margin according to the CSS rule, but it is not being applied in the display. Is it required to use an HTML Serializer in this instance to manually apply some class name? That seems like overkill, so I'm hoping it's something simple I'm doing wrong. Any help is much appreciated.

[samlittlefair]

Hi @asummers,

Welcome to the Prismic community, and thanks for posting this question

I have a guess about what could be happening. I believe styled-jsx is scoped, so the styling only affects the current component. Styling does not cascade to child components. I think you can escape this behavior with the :global() selector:

vercel/styled-jsx

So your component might look something like this:

<div className="xyz">
  <RichText render={slice.primary.description} />
</div>
<style jsx>{`
.xyz :global(p) {
  margin-bottom: 40px;
  line-height: 40px;
}
`}</style>

Let me know if that works! If not, I can try to do some debugging.

Sam