How to override default styling for custom annotation preview components in the Portable Text Editor
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
. So, to put it simply, how can I override the styling given by
without losing functionality?
Mar 18, 2023, 4:40 PM
. As a quick workaround, I'd suggest you wrap your
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.