Customize the default component library

Beta

These docs rely on Slice Machine, which is in active development and subject to change. Content Relationships are not currently supported with Slices.

During the project setup, we created a _app.js file at the root of your page folder where you will be able to customize the style of your components thanks to a theme function.

You will be able to create a custom theme by creating a variable to hold your style and spreading it on top of the predefined theme or you can import your own pre-defined theme. In the example below we gave this variable the name customTheme.

You will then pass your custom theme to the ThemeProvider theme prop.

Copy
// pages/_app.js
import React from "react";
import NextApp from "next/app";

import { theme } from "essential-slices";

import { ThemeProvider, BaseStyles } from "theme-ui";

const customTheme = {
  ...theme,
  colors: {
    ...theme.colors,
    primary: "purple",
    text: "orange",
  },
  container: {
    ...theme.container,
    slice: {
      bg: "primary",
    },
    eyebrow: {
      color: "tomato",
    },
    item: {
      background: "#FFF",
      border: "1px solid #111",
      padding: "12px",
    },
  },
};

export default class App extends NextApp {
  render() {
    const { Component, pageProps } = this.props;
    return (
      <ThemeProvider theme={customTheme}>
        <BaseStyles>
          <Component {...pageProps} />
        </BaseStyles>
      </ThemeProvider>
    );
  }
}

Theme UI Styling options

The theme option is based on theme UI so you'll be able to edit the style based on the pre-defined options. You can find all options that you can override here: essential-slices