Style the studio by over-riding custom variables

I understand the frustration! Unfortunately, Sanity Studio doesn't provide a straightforward way to adjust the internal alignment of navbar items when you have a larger logo.

The Challenge

The studio.components.navbar property in your config allows you to replace the entire navbar component, but when you use renderDefault(props), it renders the complete default navbar as a single unit. You can't easily access or style the internal flex container that holds the individual navbar items (search, buttons, etc.) through the standard configuration API.

Practical Solutions

Here are your realistic options:

1. Adjust Your Logo to Fit the Navbar (Recommended)

The most maintainable approach is to constrain your logo to work within the navbar's default height constraints:

import {defineConfig} from 'sanity'

export default defineConfig({
  // ...
  icon: () => (
    <img 
      src="/your-logo.svg" 
      alt="Logo" 
      style={{
        maxHeight: '1.75rem', // Adjust to fit default navbar height
        width: 'auto',
        display: 'block'
      }} 
    />
  ),
})

This keeps your logo at an optimal size while preventing it from pushing the navbar height up.

2. Custom CSS Override (Use with Caution)

If you absolutely need to keep your larger logo and center the navbar items, you can inject custom CSS. However, this approach is fragile and may break with Studio updates since you're targeting internal class names:

import {defineConfig} from 'sanity'

export default defineConfig({
  // ...
  studio: {
    components: {
      layout: (props) => {
        // Inject custom styles on mount
        if (typeof document !== 'undefined') {
          const styleId = 'custom-navbar-alignment'
          if (!document.getElementById(styleId)) {
            const style = document.createElement('style')
            style.id = styleId
            style.innerHTML = `
              [data-ui="Navbar"] > div {
                align-items: center !important;
              }
            `
            document.head.appendChild(style)
          }
        }
        return props.renderDefault(props)
      }
    }
  }
})

Note: This targets Sanity's internal DOM structure using [data-ui="Navbar"], which isn't officially documented and could change. Use !important to override internal styles.

3. Build a Completely Custom Navbar

You can replace the navbar entirely without using renderDefault, but this means rebuilding all navbar functionality yourself (search bar, user menu, presence indicators, project switcher, etc.). This is a significant undertaking and requires deep knowledge of Sanity UI components.

My Recommendation

Go with option #1 - adjust your logo size. The Studio's navbar is designed with specific ergonomic constraints, and working within those constraints is the most reliable long-term approach. If your logo looks best at a larger size, consider using it in other parts of your application while keeping a scaled-down version for the navbar.

If you really need complete control over the Studio chrome, you might explore embedding the Studio as a component within a larger custom application where you control the surrounding UI, but that's a much larger architectural decision.