Sanity 1.150.5 crashes with styled-components in blockEditor rendering

This is a known issue with Sanity Studio version 1.150.5 and styled-components when using them for blockEditor rendering in the Portable Text editor. The error you're seeing - "Failed to set an indexed property on 'CSSStyleDeclaration': Index property setter is not supported" - occurs when passing a styled-component directly as the render prop.

The Solution:

Instead of passing the styled-component directly, you need to wrap it in a functional component that renders the styled element with props.children:

import React from 'react'
import styled from 'styled-components'

const H2Style = styled.span`
  font-size: 2rem;
`

// Option 1: Inline function
export default {
  title: 'Rich Text Test',
  name: 'richTextTest',
  type: 'array',
  of: [
    {
      type: 'block',
      styles: [
        { 
          title: 'MyTitle', 
          value: 'h2', 
          blockEditor: { 
            render: props => <H2Style>{props.children}</H2Style> 
          } 
        }
      ]
    }
  ]
}

// Option 2: Named component (cleaner)
const H2StyleRender = props => (
  <H2Style>{props.children}</H2Style>
)

export default {
  title: 'Rich Text Test',
  name: 'richTextTest',
  type: 'array',
  of: [
    {
      type: 'block',
      styles: [
        { 
          title: 'MyTitle', 
          value: 'h2', 
          blockEditor: { render: H2StyleRender } 
        }
      ]
    }
  ]
}

Why this happens:

The issue stems from how React handles the style prop internally. When you pass a styled-component directly, it tries to set indexed properties on the CSSStyleDeclaration object, which isn't supported in the way the block editor expects.

By wrapping it in a functional component, you're giving React the proper component structure it needs, and the styled-component can render correctly with the children passed through.

This solution was confirmed working by other developers who experienced the same issue after upgrading to 1.150.5.