Error using Button component from sanity-ui in a studio plugin

This error occurs because sanity-ui components like Button require a proper theme context to function correctly. When you use sanity-ui components in a Studio plugin, they expect to be wrapped in a ThemeProvider with a Sanity theme, but your component is likely missing this context.

The error Cannot destructure property 'media' of 'theme.sanity' means the Button component is trying to access theme.sanity.media in the responsiveRadiusStyle function, but the theme object doesn't have the expected Sanity theme structure.

Quick Fix - Wrap with ThemeProvider:

import { Button, ThemeProvider, studioTheme } from '@sanity/ui'

export function MyPluginComponent() {
  return (
    <ThemeProvider theme={studioTheme}>
      <Button text="Click me" />
    </ThemeProvider>
  )
}

Why this happens:

When building Studio plugins, sanity-ui components need access to the Sanity theme context. If your component is rendered outside the Studio's normal React tree (like in a custom tool or during development), it won't have access to the theme automatically.

Common causes:

1. Missing ThemeProvider: Your component tree doesn't have a ThemeProvider wrapping it with studioTheme

2. Version mismatch: Your @sanity/ui version might be incompatible with your sanity version. Check your package.json and align versions.

3. Multiple React instances: If you're developing a plugin separately and bundling it, you might have multiple React instances. When using @sanity/plugin-kit, ensure @sanity/ui, react, and styled-components are marked as external dependencies and not bundled with your plugin.

4. Improper plugin structure: If using definePlugin, make sure your component is being rendered within the Studio's React tree where the theme context is available.

Best practice for plugins:

If you're building a proper Studio plugin, the Studio should provide the theme context automatically once your plugin is loaded. You typically shouldn't need to manually add ThemeProvider unless you're creating an isolated component tree. Make sure your plugin dependencies are configured correctly so they use the host Studio's instances of React and sanity-ui.