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.
Show original thread19 replies
Sanity – Build the way you think, not the way your CMS thinks
Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.