✨Discover storytelling in the AI age with Pixar's Matthew Luhn at Sanity Connect, May 8th—register now

How to override default styling for custom annotation preview components in the Portable Text Editor

10 replies
Last updated: May 26, 2023
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
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
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
This might also help
Mar 19, 2023, 7:28 AM
Definitely go with Saskia's way if you can. It's a much more robust solution
Mar 19, 2023, 7:30 AM
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
Thanks
user J
and
user Z
!
Mar 19, 2023, 3:59 PM
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
Hey, I did! I'll share the code in just a bit!
Apr 27, 2023, 2:17 PM
That would be wonderful
user B
🙂
May 4, 2023, 12:01 PM
I am sooo curious 🙂
user B
May 22, 2023, 9:11 AM
Hey
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
span
tag 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>
)
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.

*[data-scheme='light'] .defAnnotation * {
  border-color: #c123fc !important;
  background-color: #f8e9fe;
}

*[data-scheme='dark'] .defAnnotation * {
  border-color: #d97bfd !important;
  background-color: #331440;
  color: #fff;
}
In the schema definition, I then pull in the custom renderer component like so:

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.

Was this answer helpful?