Skip to content
Get help on SlackWatch Sanity demo

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

The Sanity Composable Content Cloud is the headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get startedWatch demo

Was this answer helpful?

Categorized in