Custom Mark serializers work, custom style serializers ignored

[simonhrogers]

With version 0.1.0, I’m finding that styles are only applied to a set of styles that use predefined HTML tags e.g. blockquote, h1, h2, etc.

When I try to create my own styles, these are ignored.

Mark serialization and custom annotations have always worked perfectly so I’m not sure where I am going wrong.

Any insight would be greatly appreciated!

Thanks so much,

Simon

PortableText.vue:

<template>
  <BlockContent
    v-if="blocks"
    :blocks="blocks"
    :className="className ? className :'text'"
    :renderContainerOnSingleChild="true"
    :serializers="serializers"
  />
</template>

<script>
import PortableTextCenter from '~/components/PortableTextCenter.vue';
import PortableTextUnderline from '~/components/PortableTextUnderline.vue';
import PortableTextExternalLink from '~/components/PortableTextExternalLink.vue';
export default {
  props: ['blocks', 'className'],
  data() {
    return {
      serializers: {
        styles: {
          center: PortableTextCenter,
          center: (props,children) => {
            return h("blockquote", {}, children.slots.default()[0].children);
          },
        },
        marks: {
          underline: PortableTextUnderline,
          link: PortableTextExternalLink
        }
      }
    }
  }
}
</script>

PortableTextCenter.vue:

<template>
  <span class="center"><slot /></span>
</template>

<style lang="scss" scoped>
.center {
  display: block;
  width: 100%;
  text-align: center;
}
</style>

[ogaguinaga]

Any updates on this? I'm experiencing the same issue. I want to pass a custom component to render h2 tags but it does not work. I also saw on the documentation that all props are passed too the serializer component but all I get is undefined.