✨Discover storytelling in the AI age with Pixar's Matthew Luhn at Sanity Connect, May 8th—register now

Styling a native Sanity component for a single implementation

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
array
so that it used
display:grid
and all the grid settings to go with it.
Apr 2, 2020, 1:45 PM
Thanks for the answer, Bryce!
I've tried adding a
preview
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
gallery
component that goes inline with Portable text. From there I created a custom
GalleryPreview
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}/>
          </figure>
        ))
      }
    </div>
  )
}

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
inputComponent
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)
S.view.form().id('EDITION_FORM')
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
aria-labelledby
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
S.form().id()
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?