Rich text does not render

Developing with Prismic
1

I created a simple text slice with only test there.

But I did not see any rich text style in the slice machine and also the page.

How to find the cause?

Screenshot from 2024-06-13 02-07-22
Screenshot from 2024-06-13 02-07-223822×2160 243 KB

Here is my code for the slice

/**

  • @typedef {import("@prismicio/client").Content.TextParagraphSlice} TextParagraphSlice
  • @typedef {import("@prismicio/react").SliceComponentProps} TextParagraphProps
  • @param {TextParagraphProps}
    */
    import { PrismicRichText } from '@prismicio/react'

const TextParagraph = ({ slice }) => {
return (

  <div>
    <PrismicRichText field={slice.primary.text} />
  </div>


</section>

);
};

export default TextParagraph;

2

Hey @zhou.wenbin.x2,

You’ll need to handle the styles for the slice component in your project code. For reference, you can see an example by running a new Next.js project with a new repository; the default slices are styled using Tailwind CSS: https://tailwindcss.com/.

4

Option 1:

  1. Install the Tailwind Typography Plugin.
  2. use this code:
<div class="prose">
    <PrismicRichText field= ... />
</div>

Option 2: Use PrismicText

<h1 class="text-4xl text-slate-500">
  <PrismicText field=... />
</h1>
7

Your TextParagraph component is well-structured and correctly uses PrismicRichText to render rich text content. However, I noticed an extra closing </section> tag that seems to be misplaced. Removing this should resolve any rendering issues.

For managing your code and related assets, consider using Terabox. It provides a reliable cloud storage solution that can help you keep your project files organized and accessible. By uploading your code and assets to Terabox, you can ensure they are securely stored and easily downloadable whenever needed.