๐Ÿ”ฎ Sanity Create is here. Writing is reinvented. Try now, no developer setup

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

14 replies
Last updated: Apr 2, 2020
Is there any way to style a native Sanity component for a single implementation?
I have one array field that could use larger grid columns, a darker background and some other niceties, but I don't want to override settings for the entire studio nor recreate the
entire array component. Plus, it'd be awesome if I could increase the max-width of the editor container for this specific document type. Any tips?๐Ÿค”
Apr 2, 2020, 1:39 PM
perhaps creating a custom preview would help? I played with that a little last night for a similar thing .. changing an
so that it used
and all the grid settings to go with it.
Apr 2, 2020, 1:45 PM
Thanks for the answer, User!
I've tried adding a
object to the array, but that didn't help. The items themselves have custom previews, but as they can't change the container's styles...
Mind sharing a snippet of how you did it?
Apr 2, 2020, 1:50 PM
mmm, so you're looking to style the outside container?
Apr 2, 2020, 1:51 PM
and yes, let me find the snippet i used last night
Apr 2, 2020, 1:51 PM
yup, to make the cards larger
Apr 2, 2020, 1:51 PM
ok, so a little background on this. I've created a
component that goes inline with Portable text. From there I created a custom
object to displaying the gallery in the block editor.
Apr 2, 2020, 1:54 PM
here's the GalleryPreview object code ... for the very short term, i've simply added the CSS styles inline, but will eventually move this out to a CSS file probably

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}/>

export default galleryPreview
Apr 2, 2020, 1:56 PM
here's what the output looks like
Apr 2, 2020, 1:57 PM
i would think this same thing would work for your needs? maybe not for increasing the overall editor width, but i think everything else
Apr 2, 2020, 1:58 PM
Gotcha! This is great for portable text, indeed, and the inline styles are no problem if this is as far as styling goes, thanks for the snippet and effort ๐Ÿ’œ
My use case, however, is inside of the regular form editor, not Portable Text, and this makes things harder: the idea is using a regular
type: 'array'
field with
options: { layout: 'grid' }
in order to maintain all of the vanilla fields and the drag and drop sorting functionality. Recreating this in a custom
would be a nightmare, especially as it was a simple matter of styling the component's CSS.
I managed to make it work with some CSS magic:

// In my `deskStructure.js`
// for the specific schema type I'm working with (edition)
And in CSS:

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;
This way, I select the form wrapper for this specific schema type based on the
attribute and am able to manipulate the editor root (increasing its width) and the grid container. Quite brittle, but much better than doing everything by hand ๐ŸŽ‰๐ŸŽ‰
Apr 2, 2020, 2:16 PM
Here's the result: a gray background for the grid container, larger cards and more room in the editor to drag this around ๐Ÿ˜
Apr 2, 2020, 2:17 PM
ahh, that makes complete sense ... and glad you've got it looking the way you want
curious, was your question more about if there is a better and/or sanity specific way? or was your question before your did the CSS magic?
Apr 2, 2020, 2:18 PM
I was wondering if there was a Sanity-native approach that didn't involve overwriting styles for the whole studio. While we were chatting I figured out that Sanity uses
in the HTML, and then I did the whole CSS thingy.
Would still love a native approach, though! hahaha
Apr 2, 2020, 2:21 PM
native is always preferred!
Apr 2, 2020, 2:21 PM

Sanityโ€“ build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?