5 Material UI Components You Should Use In Your Next React Project
Material UI is a component library for React teeming with powerful components that you should be using in your projects. If you’re just looking to create a good looking app, Material UI can provide you with solid pre-styled components that will get the job done. If you are looking to customize those components Material UI gives you the tools to do that as well.
To get started with Material UI, simply:
npm install @material-ui/core
And make sure to throw Roboto in your index.html:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
Now you can begin importing components like so:
Let’s take a look at 5 components that are guaranteed to make your project look better.
The Grid component gives you the ability to create the layout for your a section of the DOM. If you’ve ever used Bootstrap before this will be familiar to you. This is the first component I consider when laying out my MUI apps.
Key things to know about the Grid component:
- There are 2 types of Grid components, ‘container’ and ‘item’. The container is the outer most component and any children of this component should be set to ‘item’.
- The Grid system uses a 12 partitions. Items must add up to 12 when deciding how wide they are.
Grid React component - Material-UI
The Material Design responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts…
The Paper component is one of my favorites, as it gives a section some lift and a drop shadow to produce a paper-like look. This is perfect for any cards you are making.
Key things to know about the Paper component:
- You can control the drop shadow with the ‘elevation’ property.
- You can give the paper an outline by using
variant="outlined"although I prefer without the outline.
3. Material Icons
One of the best ways to make your app look professional is to have recognizable and intuitive icons. Material UI provides a set of icons that are easily imported and implemented. No more digging around the internet or trying to figure out how Font Awesome icons work. Material UI has them built in for free.
Key things to know about the Material Icons components:
- They must be separately installed using
npm install @material-ui/icons
- There are 5 variations of each icon: ‘filled’, ‘outlined’, ‘rounded’, ‘two tone’, ‘sharp’.
The Snackbar is one of the most fun and useful ways to tell your user when something has happened on your app. For example if you want to tell the user their profile picture has been uploaded. Or if you want to let the user know their user name has been taken, the Snackbar might be the right component for the job.
Key things to know about the Snackbar component:
- In order to change whether the Snackbar is showing or not you must have the state change.
- While other components are a bit easier to implement, this one takes some understanding about how it works to get it working the way you want it. But the end result is always satisfying!
Don’t sleep on Tooltip. Although it might seem trivial, tooltips in your app help users get an idea of what exactly each of your icons is doing. If your icons are not immediately intuitive, users may not know what they mean unless they have a tooltip. I recommend reading Intuitive Design by Everett McKay for more information on how to make your app intuitive.
What makes Material UI’s tooltip component so great is that you can pretty much wrap it around any other component and it will do the job.
- Tooltips can be given a specific direction to pop up. There are 12 placement choices that can be specified with the placement property.
- If you really want to dive in, you can customize the look of the tooltip and make it your own.
These are just 5 of the amazing components from the Material UI library. We haven’t even got into how to customize the components or the experimental “Lab” additions to the library.
For more information on Material UI you can of course visit the amazing documentation here:
Material-UI: A popular React UI framework
React components for faster and easier web development. Build your own design system, or start with Material Design.
If you would like to learn about more React libraries you can read my article:
React Component Libraries, How You Can Create Your Own AND 19 Libraries to Get You Started
If you’re reading this there’s a good chance you just started developing in react and you want to make some good…
Thanks for reading. For more articles like this please follow me on Medium and add me on Twitter @thedrewprint and LinkedIn — Andrew Richards