Introduction to Material-UI
This will be a multi-part series covering simple components using Google’s Material-UI library with React. If there’s a topic you’d like to cover specifically, please leave a comment!
You’ve (maybe) done your research about different CSS libraries and stumbled across Google’s open-source project, Material-UI. As a TLDR, Material-UI is a library that allows you to reuse Google’s Material Design components. Material Design is essentially a front-end developer’s go-to for best design practices.
If you’re familiar with Bootstrap, you’ll find navigating Material-UI (MUI) to be very similar. It is one of the top user interface libraries for React out there. Why? It’s incredible:
- It comes responsive out of the box.
- You can create a theme to apply global styles to your components.
- In the process of learning how to use MUI, it will help you create intentional designs while teaching you about hierarchy and meaning.
Brief Overview
In this series, we’ll go over these components:
- Grid
- Hidden
- Card
- Typography
- Snackbar (and Redux)
- Icons
Along with those components, we’ll learn about how to pass props or attributes to each of these components such as breakpoints, spacing, flexbox rules, and more! If you don’t see a topic or component you’d like to cover, please leave a comment to let me know!
Setting up Your Environment
I will be using CodeSandbox.io throughout this series so I can easily share my code with you. You’re welcome to fork these projects and customize them on your own! We will be using MUI’s core and icon library.
Setting up CodeSandbox
Once you’ve registered or signed in to CodeSandbox.io, you’ll navigate to Create Sandbox in the top right hand corner.
Next, we’ll select a React template for a faster set up. You can filter through the templates or just select the React template shown under Official Templates:
Next, we’ll add MUI to our new React app by navigating to the Dependencies menu on the left hand side:
In the text field, we’ll add these two dependencies individually:
@material-ui/core
@material-ui/iconsYour dependencies should now look like this:
Setting up Locally
If you would like to install Material-UI’s core library and icon library in your React app, simply run:
npm i --save @material-ui-core || npm install @material-ui/core
npm i --save @material-ui-icons || npm install @material-ui/iconsPlease note that you must have the core library installed in order to access the library. Like any other file or library, we’ll import the necessary components at the top of each file. For example:
Now that we have our local environment set up, we’ll dive into MUI’s Grid layout next week and create elements to display an understanding of the rows and columns.
