Style individual Sanity component without affecting entire studio?

Yes! You can absolutely style native Sanity components for single implementations without recreating the entire component or affecting your whole Studio. Here's how:

Using renderDefault to Wrap Components

The key is using the Form Components API with the renderDefault function. This lets you wrap the default component with your own styling while keeping all its functionality.

For your specific use case with an array field, you can do this in your schema:

import {defineField} from 'sanity'
import {Stack} from '@sanity/ui'

defineField({
  name: 'myArray',
  type: 'array',
  of: [{type: 'image'}],
  components: {
    input: (props) => (
      <div style={{
        background: '#1a1a1a', // darker background
        padding: '20px',
        borderRadius: '8px'
      }}>
        {props.renderDefault({
          ...props,
          // You can pass custom props here
        })}
      </div>
    )
  },
  options: {
    layout: 'grid' // This gives you grid layout for arrays
  }
})

Styling Specific Document Types

For increasing the editor container width for a specific document type, you can use the components.field option:

import {defineType} from 'sanity'

defineType({
  name: 'myDocumentType',
  type: 'document',
  components: {
    field: (props) => (
      <div style={{maxWidth: '1200px', margin: '0 auto'}}>
        {props.renderDefault(props)}
      </div>
    )
  },
  fields: [
    // your fields
  ]
})

Using Sanity UI for Better Styling

Instead of inline styles, you can use Sanity UI components for more consistent theming:

import {Card} from '@sanity/ui'

components: {
  input: (props) => (
    <Card padding={4} tone="primary" radius={2}>
      {props.renderDefault(props)}
    </Card>
  )
}

Array Grid Options

For your array field specifically, Sanity has built-in grid support:

{
  name: 'gallery',
  type: 'array',
  of: [{type: 'image'}],
  options: {
    layout: 'grid' // or 'list'
  }
}

The beauty of renderDefault is that you keep all the native functionality (drag-and-drop, validation, etc.) while just adding your custom wrapper styling. This works at multiple levels:

• components.input - Style just the input widget
• components.field - Style the entire field (including title/description)
• components.item - Style individual array items

You can apply these at the field level (single implementation) or globally in your sanity.config.js if needed later.