Trouble applying custom styles in rich text editor to live site
16 replies
Last updated: Oct 16, 2021
H
I've modified the styles available in rich text editor and I can see that the custom styles are applied in rich text editor. But in live site, it isn't working!
I'm not sure why the UI is not applied in the site! Similarly, I want to control the rendering DOMs too (say, I want to render the hyperlink content within
cc:
Here is the UI:
I'm not sure why the UI is not applied in the site! Similarly, I want to control the rendering DOMs too (say, I want to render the hyperlink content within
<a>tag).
cc:
user E
user T
user M
user A
Here is the UI:
Sep 6, 2021, 12:10 PM
Styles applied in the Studio have no effect on the frontend. You need to reapply the styles on the frontend.
Sep 6, 2021, 12:11 PM
If you’re also using React on the frontend, you could have a monorepo with the Studio and the frontend and share stylesheets. But you said in another thread that you’re using Tailwind on the frontend, so this is not an option.
Sep 6, 2021, 12:13 PM
H
If I can apply the styles from stylesheet, I'm more than happy with it.
Sep 6, 2021, 12:14 PM
are you using Tailwind on the front-end?
Sep 6, 2021, 12:14 PM
H
yeah, tailwind as well as some global styles in usual stylesheet.Here is how I try to render the UI part (code sample attached). But when I look into the actual site, I could see the contents being rendered without
div, atags as well as no classnames are being passed to frontend!
Sep 6, 2021, 12:18 PM
T
You are mixing backend and frontend styling, as Jérôme said, the style you apply in the studio has nothing to do with your website. You’ll have to use the PortableText package to apply and customize your frontend.
Sep 6, 2021, 12:24 PM
H
Thanks
I've tried the same for styles too, but it is not working! Am I missing something here?
Here is the sample object (rich text object) that I get in front-end. My problem is that how can I recognize the value in
user T
. I have already rendered some custom marks and blocks using portable text.I've tried the same for styles too, but it is not working! Am I missing something here?
Here is the sample object (rich text object) that I get in front-end. My problem is that how can I recognize the value in
style nodeand render the UI?
Sep 6, 2021, 12:33 PM
H
Here is the object sample:
Sep 6, 2021, 12:34 PM
T
You can access the style with
node.stylelike this:
const serializers = {
types: {
block: ({ node, children }) => {
switch (node.style) {
case 'h1':
return <h1>{children}</h1>
case 'h2':
return <h2>{children}</h2>
case 'h3':
return <h3>{children}</h3>
case 'h4':
return <h4>{children}</h4>
case 'h5':
return <h5>{children}</h5>
case 'h6':
return <h6>{children}</h6>
case 'blockquote':
return <blockquote>{children}</blockquote>
default:
return <p>{children}</p>
}
}
}
}Sep 6, 2021, 12:39 PM
H
Awesome
user T
. Exactly what I was looking for!!!Sep 6, 2021, 12:57 PM
H
I want to style the list items in Sanity. I tried capturing it in the same
typesblock but it is not working!
Oct 16, 2021, 2:15 PM
H
user T
Can you please help me on this?Oct 16, 2021, 2:15 PM
H
user T
Can you please help me on this?Oct 16, 2021, 2:15 PM
T
Hey
user H
, list items are under the type listsnot
block
Oct 16, 2021, 2:23 PM
H
thanks! figured it out 🙂
Oct 16, 2021, 2:26 PM
T
You can do something like this
list: ({ children, type }) =>
type === 'bullet' ? (
<ul className="something">{children}</ul>
) : (
<ol className="something-else">{children}</ol>
)Oct 16, 2021, 2:26 PM
Sanity– build remarkable experiences at scale
Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.