Styling a native Sanity component for a single implementation using CSS magic.

import React from 'react'
import client from 'part:@sanity/base/client'
import urlBuilder from '@sanity/image-url'

const urlFor = source => urlBuilder(client).image(source)

const galleryPreview = ({ value = {} }) => {
  let wrapperStyles = {
    display: 'grid',
    gridTemplateColumns:'repeat(3, 1fr)'
  }
  let figureStyles = {
    margin: '1rem'
  }
  let figureImgStyles = {
    maxWidth: '100%'
  }

  return (
    <div style={wrapperStyles}>
      {value &&
        value.images.map(image => (
          <figure key={image._key} style={figureStyles}>
            <img src={urlFor(image).url()} style={figureImgStyles}/>
          </figure>
        ))
      }
    </div>
  )
}

export default galleryPreview

// In my `deskStructure.js`
// for the specific schema type I'm working with (edition)
S.view.form().id('EDITION_FORM')

div[aria-labelledby*='EDITION_FORM'] div[class^='Editor_root'] {
  /* 200px larger than the default container */
  max-width: calc(840px + 2rem);
}

div[aria-labelledby*='EDITION_FORM'] ul[class^='GridList_root'] {
  /* default size is minmax(7rem, 1fr) */
  grid-template-columns: repeat(auto-fill, minmax(180px, 200px));
  /* Add a gray color to differentiate cards from BG */
  background: #f2f2f2;
}