A Quick Start into Material UI
Tags: beginners, tutorial, react, materialui
Published: 2022-06-20 03:21:43

If you’re curious about [Material UI (MUI)](https://v4.mui.com/), 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](https://material.io/components), 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. 


![Example of Button Demo and Code from MUI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wf8hbmvpgh261pulkpqh.png)

## 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:

```js
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 ](https://v4.mui.com/api/typography/). 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.

```js
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.

```js
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](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](https://coolors.co/) is a great place to go to help generate ideas / great color combinations.
Below is an example of my **theme.js** file.

```js

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:

```js
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.

```js
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.
![Material UI Typography and Switch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2bpb260tf1eyutm7tx5p.png)

## 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](https://www.youtube.com/watch?v=pHclLuRolzE&list=PLQg6GaokU5CwiVmsZ0d_9Zsg_DnIP_xwr)
 **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](https://www.youtube.com/watch?v=bDkB3LoQKxs)
 **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](https://medium.freecodecamp.org/meet-your-material-ui-your-new-favorite-user-interface-library-6349a1c88a8c)
**Learn React & Material-UI**: a series of videos covering all the important Material-UI components.
        - 📹 [The videos](https://www.youtube.com/watch?v=xm4LX5fJKZ8&list=PLcCp4mjO-z98WAu4sd0eVha1g-NMfzHZk)
**Getting Started With Material-UI For React**: a blog post that guides you in building a simple card list.
        - 📝 [The blog post](https://medium.com/codingthesmartway-com-blog/getting-started-with-material-ui-for-react-material-design-for-react-364b2688b555)
        - 📹 [The video](https://www.youtube.com/watch?v=PWadEeOuv5o)
**Elegant UX in React with Material-UI**: a blog post covering some important Material-UI concepts.
        - 📝 [The blog post](https://alligator.io/react/material-ui/)