Allow <SanityContent> to use :deep() selectors for custom styling

I've followed the instructions about wrapping a portable text component to add my custom serializers. However, one thing I also do is add custom formatting here.

For example in the <style> tag:

<script setup lang="ts">
import type { PortableTextBlock } from "@portabletext/types";

defineProps({
  blocks: {
    type: Array<PortableTextBlock>,
    required: true,
  },
});
</script>

<template>
  <SanityContent :blocks="blocks" />
</template>

<style scoped>
:deep(a) {
  text-decoration: none;
}
:deep(a:hover) {
  text-decoration: underline;
}

:deep(h2),
:deep(h3) {
  margin-top: 48px;
  margin-bottom: 12px;
}

:deep(p) {
  margin-bottom: 16px;
}

:deep(ul),
:deep(ol) {
  margin-bottom: 12px;
  padding-left: 24px;
}
</style>

However, this does not work since Vue does not seem to be able to apply any of the :deep() selectors to a purely functional component, which <SanityContent> is.

Describe the solution you'd like to see

Either update the docs to suggest wrapping it in a div, or make <SanityContent> a rendered component so :deep() can be used.

Describe alternatives you've considered

My current workaround is wrapping <SanityContent> in a div.

<template>
  <div>
    <SanityContent :blocks="content" />
  </div>
</template>

This correctly applies all my styles.

Start by reading the portable text documentation at the linked helpers page and inspect how the SanityContent component renders its blocks. Determine whether the issue should be resolved by documenting the div wrapper or by changing the component so scoped :deep() selectors apply, then verify the documented workaround or styling behavior shown in the examples.