How to override default styling for custom annotation preview components in the Portable Text Editor
10 replies
Last updated: May 26, 2023
M
Hi all! We're using three kinds of annotation for a particular document: internal links, external links, and defined terms. In the Portable Text Editor, I would like to render the annotated text with a different color for each kind of annotation. I've built custom annotation preview components, but I can't figure out how to override the styling given by
So, to put it simply, how can I override the styling given by
renderDefault.
So, to put it simply, how can I override the styling given by
{props.renderDefault(props.children)} without losing functionality?Mar 18, 2023, 4:40 PM
V
Hey
user B
. As a quick workaround, I'd suggest you wrap your props.renderDefault(props.children)with e.g. a span marked with a dataset attribute (e.g. data-annotation) and use props.renderDefault inside it, so you can override styling.
Mar 19, 2023, 6:45 AM
S
This might also help
Mar 19, 2023, 7:28 AM
V
Definitely go with Saskia's way if you can. It's a much more robust solution
Mar 19, 2023, 7:30 AM
S
Your way is the right way, I just wanted to drop my guide here as a help! :saluting_face:
Mar 19, 2023, 7:31 AM
M
Thanks
user J
and user Z
!Mar 19, 2023, 3:59 PM
A
user B
I am curious, did you manage to get it to work? Because I dont and I can not find any thread confirming render text in a color 🙂Apr 20, 2023, 8:18 AM
M
Hey, I did! I'll share the code in just a bit!
Apr 27, 2023, 2:17 PM
A
That would be wonderful
user B
🙂May 4, 2023, 12:01 PM
A
I am sooo curious 🙂
user B
May 22, 2023, 9:11 AM
M
Hey
I have a simple component that wraps the annotation in a
It imports a simple css module that applies styling to the children of the custom wrapper (use the inspector in your browser for more detail). It also accounts for the theme.
In the schema definition, I then pull in the custom renderer component like so:
user B
— soooooo sorry for the slow reply! Here's what I got to work:I have a simple component that wraps the annotation in a
spantag with a custom class.
import { BlockAnnotationProps } from 'sanity'
import styles from './DefinitionAnnotationRenderer.module.css'
export const DefinitionAnnotationRenderer = (props: BlockAnnotationProps) => (
<span className={styles.defAnnotation}>{props.renderDefault(props)}</span>
)*[data-scheme='light'] .defAnnotation * {
border-color: #c123fc !important;
background-color: #f8e9fe;
}
*[data-scheme='dark'] .defAnnotation * {
border-color: #d97bfd !important;
background-color: #331440;
color: #fff;
}defineField({
name: 'definitionAnnotation',
title: 'Defined Term',
type: 'reference',
icon: GoBook,
to: [{ type: 'definitionDoc' }],
components: {
annotation: DefinitionAnnotationRenderer,
},
}),May 26, 2023, 8:34 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.