Why you should use Material UI

INTRODUCTION

For my Phase 3 project at Flatiron School, I wanted to challenge myself in learning a new CSS component library. I landed on Material UI. As someone with a background in graphic design and marketing, here's why I think this stands out above all the rest (and why it's so easy to learn).

BACKGROUND
Material UI is a CSS component library that unifies React and Google's Material Design.

Google's main goal in creating Material Design (which Material UI is based off of) was to build an accessible styling framework for apps. Leveraging what they call design tokens, Google has built design system styles that allows all products and the system of your app to tell the same story visually and functionally.

ACCESSIBILITY, ABOVE ALL ELSE
Material UI's biggest asset and number one goal is to be accessible. What does this mean?

Color
Material UI provides a color palette tool that allows you to custom create an accessible package of colors for your app.

Considering contrast in relation to color is essential in making apps readable for all. Material UI has this down to a science. These colors work in harmony to create the best visual package for users. The temptation of using too many colors that don't complement one another is gone.

Icons
I could write a whole separate blog about icons and why they should be a requirement for every app. In short, icons are:

• A powerful tool in making users of all languages able to interpret elements of your site.
• A powerful tool in decluttering your site and replacing words and sentences with a visual queue.
• A powerful tool in creating a user flow and navigation for your site that words overcomplicate.

Material UI again knocks it out of the park with their options for icons, providing a vast library, where you can have filled, outlined, rounded and more icons at your fingertips in seconds.

How do you insert an icon? Simply import the icon name at the top of your react component and then insert the icon name in the location you desire by calling the icon name.

import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';

<div>
 <AddCircleOutline />
</div>

Font
Material UI's signature font is Roboto. It's clean, it's readible, it's used by Google. If you want to up the professional factor of your site, keep it simple and just use it.

STREAMLINED LOOK

Components that set you up for success

With almost 100 pre-built components, MUI helps you stay on track with creating an app that will look clean and professional.

Among my favorites are the button, slider, and dialog.

You can view the component API to learn more about how you can customize these tools (more on this below).

INTUITIVE DESIGN
The SX Prop
If you want to customize a one-off component in Material UI, the easiest way to do so is by using the sx prop. An easy-to-learn syntax, the sx prop attaches directly to a component, (in this case, a slider) like so:

<Slider
  defaultValue={30}
  sx={{
    width: 300,
    color: 'success.main',
  }}
/>

ClassNames
You can also style MUI components as you would any other className in React by using traditional CSS (note the specific MUI component name here, MenuItem).

.MenuItem {
  color: black;
}

/* Increase the specificity */
.MenuItem.Mui-selected {
  color: blue;
}

<MenuItem selected className="MenuItem">

Material UI also lets you make global changes to components.

CONCLUSION
I've barely scratched the surface with MUI, and I'm excited to learn more. It's clean, clear documentation, comprehensive design and style makes it the strongest CSS component library out there (in my opinion). Give it a try on your next app!

RESOURCES
To start with Material UI, follow along with their awesome getting started page and docs!