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.

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.

Just declare it in the sanity.json file in your studio:

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

For example, to create a dark theme, your variableOverrides.css might look like this:

@import url('');

:root {
  --font-family-sans-serif: 'Fjalla One';

  --body-bg: #333;
  --text-color: #eee;

  --brand-primary: #81A76D;
  --brand-secondary: #95BF6F;

  --component-bg: #555;
  --component-border-color: #777;
  --component-box-shadow: 0 1px 3px color(var(--black) a(50%));

  --state-danger-color: #F8495F;

All the variables you can override are listed here.

Change the logo

Want to change the top left logo to your own? Make a part called part:@sanity/base/BrandLogo, and implement it in sanity.json.

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

In this case, myLogo.js is a React component. 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/

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.


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


.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


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:


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


: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

Previous: PartsNext: Plugins