A Quick Start into Material UI

If you’re curious about Material UI (MUI), aren’t really sure where to start, and are looking for a short jumpstart guide into setting up MUI components using React. This is for you.

What is Material UI?

A popular UI library that allows developers to reuse well-designed components from Material Design, a best-practice design system for front-end development. MUI plays well with React, and provides interactive components for designing responsive user interfaces.

MUI Has Excellent Documentation

The Material UI documentation provides a ton of information on multiple components from a simple button to nav menus, to tabs, tables, sliders, etc. You name it, and Material UI has a component that fits your needs. The MUI component API documentation is stocked with great information on each component’s properties, a description of the property with it’s default values, CSS rules, Demos, and code examples.

Quickly Getting Started in React & Material UI

1- Let's first get set-up in React. If you already have a React project ready and waiting, you can skip down to "Using MUI Components." If not, in your terminal, make a new folder with the git commands: mkdir and whatever you want your app folder to be called. I’m calling mine: material-ui-app

mkdir material-ui-app

2- Open your project in VScode or whatever local development environment you’re using. In your LDE terminal, you can quickly start-up a new project in react with the git command:

npx create-react app

3- Start the development server with

npm start

4- Then bundle the app into static files for production with

npm run build

React is an article (multiple articles) for another time. For now, we’re going to use it right out of the box and move on to installing what we need to begin using Material UI components.

Using MUI Components

First step, let’s add the Material UI library as a dependency to our React Project, and this will set us up with everything we need to begin importing components. In your LDE terminal type:

npm i —save @material-ui/core

Let's head over to your App.js file and make sure your initial file looks similar to this:

import React from 'react';
import './App.css';


function App() {

  return (
    <div className="App"></div>
  );
}

export default App;

We're going to start off with the basics. In our App.js file, let's import a Typography component. We'll need to import the component destructured directly from the MUI Library and add the <Typography> tags directly into our App <div>. Read more via the Typography API documentation . As you can probably tell, we're going to be adding a switch component later so I'll type "Here's Our Switch as our text between the <Typography> component tags.

import React from 'react';
import { Typography } from '@material-ui/core';
import './App.css';


function App() {

  };

  return (
    <div className="App"> 
      <Typography>
        Here's Our Switch
      </Typography>
    </div>
  );
}

export default App;

Let’s customize our Type:

We’re going to use the built-in MUI properties of align, color, and variant.

align
this prop comes with type values of: ‘left’, ‘center’, ‘right’ and ‘justify’

variant
this props uses type values of standard html tags: h1 through h6, and body1, caption, etc.

color
this prop has values of ‘inherit’, ‘primary’, secondary’ etc.
The color of each component is supported by MUI themes. Each color prop is automatically adapted by default per component.

In our example I’ll use: align="center" color="primary" variant="h2", but you should feel free to choose values that you like best.

import React from 'react';
import { Typography } from '@material-ui/core';
import './App.css';


function App() {
  return (
    <div className="App"> 
      <Typography align="center" color="primary" variant="h2">
        Here's Our Switch
      </Typography>
    </div>
  );
}

export default App;

So you might be asking... Where does the color come from? And can I change it? This brings us to the fun part. Themes!

MUI Themes

There’s a lot of great documentation on each component’s theme.

Themes are customizable. I’d recommend taking a deep dive into the default theme object. Found here: https://v4.mui.com/customization/default-theme/#default-theme,

This is where all of our default values are coming from and this is how we are going to gain access to each property that we are going to customize. Default Theme is here to help us keep all styles consistent, a UI best-practice.

Let’s Create our own Theme:

You'll want to create a new js file called theme.js. You can do a lot with the theme object, but for simplicity we're going to focus on customizing the primary and secondary colors.

I've added custom HEX codes to the primary and secondary object. Feel free to choose your own colors. If you're not confident about choosing color palettes, coolors.co is a great place to go to help generate ideas / great color combinations.
Below is an example of my theme.js file.

import { createTheme } from '@material-ui/core/styles';

const theme = createTheme({
  palette: {
    primary: {
      light: '#b4d6e4',
      main: '#09BC8A',
      dark: '#004346',
      contrastText: '#fff',
    },
    secondary: {
      light: '#ff7961',
      main: '#f44336',
      dark: '#ba000d',
      contrastText: '#000',
    },
  },
});

export default theme;

In our index.js we need to import a ThemeProvider and our theme.js file like so:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { ThemeProvider } from '@material-ui/core';
import theme from './theme'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <ThemeProvider theme={theme}>
      <App />
     </ThemeProvider>
  </React.StrictMode>
);

Ok, back in the App.js file. Let’s add a switch component just for fun. Again, just head back to the MUI component options. Choose the type of switch you’d like to add to your React app. Use their component code, and voila. As you can see, you’re switch will also inherit the custom theme / color that we created earlier.

import React from 'react';
import Switch from '@material-ui/core/Switch';
import { Typography } from '@material-ui/core';
import './App.css';


function App() {
const [state, setState] = React.useState({
    checkedA: true,
    checkedB: true,
  });

  const handleChange = (event) => {
    setState({ ...state, [event.target.name]: event.target.checked });
  };

  return (
    <div className="App"> 
      <Typography align="center" color="primary" variant="h2">
        Here's Our Switch
      </Typography>
      <Switch
        checked={state.checkedB}
        onChange={handleChange}
        color="primary"
        name="checkedB"
        inputProps={{ 'aria-label': 'primary checkbox' }}
      />
    </div>
  );
}

export default App;

And, here's our type and switch.

In Conclusion

There you have it, your first customized Material UI components. Thanks for reading.

Here are some Free Resources via MUI’s getting started page.
Introduction to Material-UI: a series of videos covering all the important Material-UI components.
- 📹 The videos
Customize Material-UI for your project: a look at how you can customize Material-UI to align with your company identity (design system) and products
- 📹 The videos
Meet Material-UI — your new favorite user interface library: a blog post that guides you in building a Todo MVC while covering some important concepts of Material-UI.
- 📝 The blog post
Learn React & Material-UI: a series of videos covering all the important Material-UI components.
- 📹 The videos
Getting Started With Material-UI For React: a blog post that guides you in building a simple card list.
- 📝 The blog post
- 📹 The video
Elegant UX in React with Material-UI: a blog post covering some important Material-UI concepts.
- 📝 The blog post