Customize the default component library

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.

// 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

9 Rue de la Pierre Levée, 75011 Paris