How to override CSS classes in Sanity Studio with custom styles

I can see you're trying to override CSS styles in Sanity Studio v3, but targeting generated class names like .IkYbE won't work reliably. Let me explain the correct approach.

The Problem with Your Approach

In Sanity Studio v3, the class name .IkYbE you're trying to override is a CSS module hash - a randomly generated class name that changes between builds. This means your override will break whenever the Studio updates or rebuilds.

The variableOverrides.css approach you mentioned is from Sanity Studio v2 and doesn't work the same way in v3. Studio v3 uses a completely different styling system.

The Correct Way to Override Styles in Studio v3

Studio v3 uses Sanity UI under the hood, which provides stable, semantic attributes you can target. Here are your options:

1. Use data-ui Attributes (Recommended)

Sanity UI components use data-ui attributes that are stable across builds. You can target these in a global CSS file:

/* styles.css or global.css */
[data-ui="Button"][data-kind="primary"] {
  display: none !important;
}

/* Or target specific UI elements */
[data-ui="Card"][data-as="section"] {
  background: red;
}

Then import this CSS file in your sanity.config.ts:

import {defineConfig} from 'sanity'
import './styles.css' // Import your global styles

export default defineConfig({
  // ... rest of config
})

2. Use the Theme API

For color and design token changes, use the theme configuration with buildLegacyTheme:

import {buildLegacyTheme, defineConfig} from 'sanity'

const myTheme = buildLegacyTheme({
  '--black': '#1a1a1a',
  '--white': '#fff',
  '--brand-primary': '#4285f4',
  // ... other theme variables
})

export default defineConfig({
  theme: myTheme,
  // ... rest of config
})

3. Inspect Elements to Find data-ui Attributes

Use your browser's developer tools to inspect elements and look for data-ui attributes instead of class names. For example:

• Buttons: [data-ui="Button"]
• Text inputs: [data-ui="TextInput"]
• Cards: [data-ui="Card"]
• Stack layouts: [data-ui="Stack"]

Why Your Current Approach Doesn't Work

1. CSS Modules: Studio v3 uses CSS modules with hashed class names that change between builds
2. No variableOverrides.css: The v2 pattern of using part:@sanity/base/theme/variables/override-style doesn't exist in v3
3. Build-time generation: Class hashes are generated at build time, making them unreliable targets

Example: Hiding an Element

Instead of:

.IkYbE { display: none !important; } /* ❌ Will break */

Do this:

[data-ui="Button"][aria-label="Specific button"] { 
  display: none !important; 
} /* ✅ Stable */

The key is to use semantic attributes (data-ui, aria-*, role, etc.) rather than generated class names. If you share what specific element you're trying to hide, I can help you find the right selector!