🎤 Builder Talk: The Story Behind Lady Gaga’s Digital Experience – Register now

Warning

This article is for an older version of Sanity Studio (v2), which is deprecated. Learn how to migrate to Studio v3 â†’

Styling the Studio

Sprinkle custom CSS on your Sanity Studio with the parts system.

Not happy with how Sanity looks? Need to provide styles for a custom component or just change a couple of brand colors?

In other systems you would need to provide custom CSS to override selectors, creating brittle dependencies. Or perhaps worse, change the internal CSS and thereby making future upgrades hard.

In Sanity you can override, compose and create new functionality by defining parts. This also goes for CSS and styling.

Protip

You are free to decide where in your project folder you place files associated with parts and what you name them, but you need to make sure the part's path has the correct relative file path in sanity.json.

Overriding variables

The easiest way to style the Content Studio is to override the variables which define the basic look. You do this by providing an implementation for the part part:@sanity/base/theme/variables/override-style.

Declare it in the sanity.json file in your studio first, with a path to a CSS file, and save your changes:

{
  "parts": [
    {
      "implements": "part:@sanity/base/theme/variables/override-style",
      "path": "variableOverrides.css"
    }
  ]
}

Then, create the CSS file in the location of the part's path. In this case, at the root of your project. Now, you can override any of the available CSS variables by declaring them on the :root pseudo class and assigning them new values.

For example, to use different brand colors and a new font, your variableOverrides.css might look like this:

@import url('https://fonts.googleapis.com/css?family=Fjalla+One');

:root {
  --brand-primary: #81A76D;
  --brand-secondary: #95BF6F;
  --font-family-base: 'Fjalla One';
}

Protip

To see your changes live, run sanity start in the terminal. If this command is already running, force quit it and run it again to make sure the new part is implemented correctly. Then see your changes live as you save them.

All the variables you can override are listed here.

Changing the logo

Want to change the logo in the navigation bar to your own? Provide an implementation for the part called part:@sanity/base/BrandLogo, and declare it in sanity.json.

{
  "implements": "part:@sanity/base/brand-logo",
  "path": "components/myLogo.js"
}

In this case, myLogo.js is a React component in a components folder. Have it render your SVG directly or put an asset in the static-folder and reference it. The path to your static folder in the browser is /static/.

For example, your myLogo.js might look like this:

import React from 'react';

const myLogo = () => (
    <img src="/static/logo.png" alt="my logo"/>
  );

export default myLogo;

Customizing the loading UI

Want to create a custom loading screen? Provide an implementation for the part part:@sanity/base/app-loading-screen in sanity.json:

{
  "implements": "part:@sanity/base/app-loading-screen",
  "path": "./components/loading-screen.tsx"
}

Refer to the AppLoadingScreen component for a starting point for your own implementation.

Styling your own components

Ok, so you need to create a widget for a custom data type. To isolate our CSS in the component where it's used we apply some PostCSS with css-modules. You strictly don't need to use css-modules in your own CSS, but we do recommend it.

JSX

import styles from './myStyling.css'
//...
<div className={styles.myComponent}>
  Styled
  <a className={styles.myNormalLink}>Link</a>
  <a className={styles.myCustomLink}>Custom link</a>
</div>

CSS

.myComponent {
  border: 1px solid red;
}

.myNormalLink {
  text-decoration: underline;

  @nest &:hover {
    background-color: #eee;
  }
 
  @nest &:visited {
    color: #888;
  }
}

.myCustomLink {
  composes: myNormalLink;
  text-decoration: uppercase;
}

You can also compose from existing parts into your component

.myTextInput {
  composes: textInput from "part:@sanity/base/theme/forms/text-input-style";
  border: 1px solid red;
}

Some best practices when writing css-modules

  • Include your styles in your js-file import styles from './myStyling.css'
  • Your classes are now available on the styles object
  • Use it in JSX like <div className={styles.myStyle}>This is styled</div>
  • An unique class will be created and reused if needed.
  • Use composes to inherit styles from other classes and parts. Use it as much as possible
  • We provide a lot of standard styles as parts in @sanity/base
  • A lot of styles can be picked from the parts in @sanity/components as well

CSS libs in use in Sanity

Globals

If you want to use BEM or other ways than css-modules, you have to wrap the selectors in a :global selector.

NOTE: If you choose global class names like .link, there is a chance that other chooses the same class name and it will conflict. Please use a namespace if using global.

An example:

JSX

<div className="myComponent-Element--modifier" />

CSS

:global(.myComponent-Element--modifier) {
  border: 1px solid red;
}

Using external CSS in Sanity

In certain cases (such as when using third-party React components) you might need to import CSS directly from these modules. When importing a CSS file from Javascript inside of Sanity, CSS module class names are generated. To prevent this, you can use the query parameter raw to import the file "as-is". Example:

import Slider from 'react-slick'
import 'slick-carousel/slick/slick.css?raw'
import 'slick-carousel/slick/slick-theme.css?raw'

export default Slider