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
.
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.
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;
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.
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}>
Styled
<a className={styles.myNormalLink}>Link</a>
<a className={styles.myCustomLink}>Custom link</a>
</div>
.myComponent {
border: 1px solid red;
}
.myNormalLink {
text-decoration: underline;
@nest &:hover {
background-color: #eee;
}
@nest &:visited {
color: #888;
}
}
.myCustomLink {
composes: myNormalLink;
text-decoration: uppercase;
}
.myTextInput {
composes: textInput from "part:@sanity/base/theme/forms/text-input-style";
border: 1px solid red;
}
- 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
- postcss
- css-modules Keeps your styles inside your component.
- cssnext Lets you write modern CSS.
- lost Grid framework
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.
<div className="myComponent-Element--modifier" />
:global(.myComponent-Element--modifier) {
border: 1px solid red;
}
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