Quickly set up a theme in Material-UI and access it in your components

Add a customisable Material-UI theme to your React app

Photo by Toa Heftiba on Unsplash

There are a million tutorials on Create React App, but few walk through adding the minimal code needed to get started with the Material-UI theme.

We’re going to skip the React basics and focus on:

• Installing Material-UI
• Adding the default theme to your app
• Customising the default theme
• Accessing the theme in your components

Let’s get started!

Install React with Create React App

Open up your terminal and navigate to the folder you’d like the app to live in.

Run the following commands, replacing material-ui-baseline with your project name:

npx create-react-app material-ui-baseline
cd material-ui-baseline
npm start

Install Material-UI

In your terminal, inside the project root folder run:

// with npm
npm install @material-ui/core
// with yarn
yarn add @material-ui/core