Index
Edit

Styling

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 change our core CSS thereby making upgrades more difficult.

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 studio is to override the variables that 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": "myVariables.css"
    }
  ]
}

If you wanted to create a dark pro-theme your myVariables.css would look like this:

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

: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, or think what we have done with the date-picker to be revolting. Parts, parts, parts.

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 sure 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: text-input from "part:@sanity/base/theme/forms";
  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;
}

Previous: PartsNext: Plugins