Sanity Library Reference Docs
    Preparing search index...

    Interface BlockStyleDefinition

    Schema definition for a text block style. A text block may have a block style like 'header', 'normal', 'lead' attached to it, which is stored on the .style property for that block.

    The first defined style will become the default style.´´

    {
      name: 'blockContent',
      title: 'Content',
      type: 'array',
      of: [
        {
          type: 'block',
          styles: [
            {title: 'Normal', value: 'normal'},
            {title: 'H1', value: 'h1'},
            {title: 'H2', value: 'h2'},
            {title: 'H3', value: 'h3'},
            {title: 'H4', value: 'h4'},
            {title: 'H5', value: 'h5'},
            {title: 'H6', value: 'h6'},
            {title: 'Quote', value: 'blockquote'}
          ]
        }
      ]
    }

    defineArrayMember({
      type: 'block',
      styles: [
        {
          title: 'Paragraph',
          value: 'paragraph',
          component: ParagraphStyle,
        },
        {
          title: 'Lead',
          value: 'lead',
          component: LeadStyle,
        },
        {
          title: 'Heading',
          value: 'heading',
          component: HeadingStyle,
        },
      ],
    })
    interface BlockStyleDefinition {
        component?: ComponentType<BlockStyleProps>;
    }
    Index

    Properties

    component?

    Properties

    component?: ComponentType<BlockStyleProps>

    Component for rendering a text style.

    See also BlockStyleProps

    • Try not to hard code CSS properties that could be derived from @sanity/ui. This will make sure your rendering looks good independent of the theme context it appears in.
    • Don't render arbitrary text nodes as this will confuse the editor with what is editable text and not. If you need arbitrary text, make sure to wrap them in in a container with contentEditable={false}.

    Example: Example of rendering a custom style for article leads which is bigger,

    and bolder, but will adapt to what the current @sanity/ui theme has defined as actual values for weight "bold" and size={3}.

    import {Text} from '@sanity/ui'

    const LeadStyle = (props: BlockStyleProps) => (
      <Text weight="bold" size={3}>
        {props.children}
      </Text>
    )

    Settings

    Member Visibility

    On This Page

    Properties