Introduction to Material UI Sebin Benjamin

What is Material UI?

• Material UI is an open source UI library made
for React, that allows developers to use pre-
made UI components in their own
applications.
• What does this actually mean?
• Instead of creating a custom button, or text field
or even an entire app bar, Material UI has them
pre-made and ready to go. World's most popular
• Essentially Material UI is very similar to Bootstrap, React UI framework.
but much more powerful and has a lot more
components
What is Material Design ?
• Material Design is a design system – backed by open-source code –
that helps teams build high-quality digital experiences for Android,
iOS, and the web.
• Inspired by the physical world and its textures, including how they
reflect light and cast shadows.
• Material interfaces are made of digital "paper-like" surfaces that
change shape and move in three dimensions, with text applied as
"ink" that ripples when touched or pressed.
Inspired by the
physical world
A bit of history...
Skeuomorphism
Skeuomorphism is a term used in graphical user
interface design to describe interface objects that
mimic their real-world counterparts in how they
appear and/or how the user can interact with them.
● Flat design is a user interface design style that
uses simple, two-dimensional elements and
bright colors.
● It is often contrasted to the skeuomorphic style
that gives the illusion of three dimensions
through copying real-life properties.
● On the web, with minimal design elements,
websites are able to load faster and resize easily,
and still look sharp on high-definition screens.
● Criticized for making user interfaces unintuitive
and less.
Goals of Google’s Material Design
1. Create a visual language that synthesizes classic principles of good
design with the innovation and possibility of technology and
science.
2. Develop a single underlying system that allows for a unified
experience across platforms and device sizes.
Components cover a range of interface needs, including:
● Display: Placing and organizing app content using components such as
cards, lists, and sheets.
● Navigation: Moving through your app, with patterns such as navigation
drawers and tabs.
● Actions: Performing tasks, using components such as the floating action
button – a unique Material Component that emphasizes a single, primary
action per page.
● Input: Entering information or selections, using components such as text
fields, chips, and selection controls.
● Communication: Alerting users to key app information and messages,
with components such as snackbars, banners, and dialogs.
Component
• Material Components are interactive building blocks for creating a
user interface, and include a built-in states system to communicate
focus, selection, activation, error, hover, press, drag, and disabled
states.
Theming
Material Theming is the ability to easily and systematically customize
Material Components with global styles for color, typography, and
shape. Components come with a built-in baseline theme. Theming lets
you customize these default styles, applying changes quickly and
consistently across your product. You can also customize styles at a
component level.
Read more here
What do we need to use things like Material
Design?
• If it’s possible for a developer to ruin a UI, they will
• The alternative to good design isn’t no design, it’s bad design
material design is a set of
guidelines that's trying to
make technology more
usable
Back to MUI - A few examples https://mui.com/
https://mui.com/pricing/
Must I use Material-UI for Mission X? - No
• You can if you want, but customizing a component completely to look
as it would in a given design takes a lot of effort.
• Material-UI is usually good for use in personal projects or in projects where
the design is not yet fully established.
• Basically, the less you need to customize the components, the easier it will be
to use them.
• More often than not, it will be easier to create your own components
for Mission X.
Installing Material UI
• For the installation we should create a new React app.
• To install Material UI go into the terminal and navigate to your app
directory, then run

npm install @mui/material @emotion/react @emotion/styled

How to use a component Step 1
• If you spot a component that you want to use on https://mui.com/
and if you already have the Material UI npm package installed, this is
what you need to do.
• Step 1: find the page on the Material-UI website of the component
you want to use. E.g. if I wanted to use a button, I would go to
https://mui.com/components/buttons/. Here we are given a preview
of what the buttons look like and the code needed to display them.
How to use a component Step 2
• Step 2: Clicking this button allows us to see the code for the full file
needed to show the component
• If we look at the very top of the full code we can see all the imports
• Notice that to use the button we
first need to import it with
import Button from '@mui/material/Button';
How to use a component Step 3
• Step 3: after importing the component in your React file. We can now
use the component just like other React components you’ve used
before. (Don’t forget to capitalize the component both when you use
it and when you import it) import Button from '@mui/material/Button';

• The code shown here Imports export default function App() {

return (
the Button component and then <div className="App">
<Button variant="contained">Button</Button>
we can use it in the JSX inside of );
</div>

our return statement. }

• This is the result

How to use a component Step 4
• Step 4:
• You might’ve noticed in the code on the last slide we included some
props for our button, like variant. But how do we know what props
we can use?
• If we scroll to the very bottom of the webpage we should see a list
with the heading API for the Button component it looks like this
• If you click on the <Button /> component it will take you
to a page that has a list of props for that component
and a brief description of what it does.
• Lets take a look at some examples.
How to use a component Step 5
• Now that we are on the component API page we should see a list of all the
props we can use
• In the previous example in step 3 we used the “variant” and “color” props.
• Looking at those props on the
Button API page we can see the
possible options we could have
for those props.
• We can use variant=“contained” to give the button a more closed off look
and color=“primary” to give the button a blue color. You might be tempted
to change the color to a custom color. Unfortunately, we can’t do this with
the color prop. To be able to use custom styles is a little more complicated
and we’ll cover that later on.
Exercise
• Add a new Button to your page that has a variant of contained, a
color of secondary and when clicked, will link to google.com
Styling Material components
● makeStyles() helps you to generate and apply styles which could be used
in material components.
import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles({
myComponentCustomStyle: {
color: 'blue',
},
});
const classes = useStyles();
...
<Button className={classes.myComponentCustomStyle}>
Avatar Component
An avatar is a graphical representation of a user or the user's character or
persona.
● Image avatars
● Letter avatars
● Icon avatars
Size of the avatar can be changed with the height and width CSS properties
More - https://material-ui.com/components/avatars/
Typography & Icons

<Typography variant="h1"
component="h2" gutterBottom>
h1. Heading
</Typography>
<Typography variant="h2"
noWrap gutterBottom>
h2. Heading
</Typography>

https://material-ui.com/api/typography
Tooltip
● Tooltips display informative text when users hover over, focus on, or tap
an element.
● Usually a description of the element’s function.

<Tooltip title="Add" arrow>

<Button>Arrow</Button>
</Tooltip>

https://material-ui.com/components/tooltips/
Material Grid Component
● The grid creates visual consistency between layouts
● It uses CSS’s Flexible Box module
● Two types of layout:
○ Containers
<Grid container>
○ Items <Grid item>
Grid Item Contents
</Grid>
</Grid>
2 column layouts
Imagine your layout as
consisting of 12
columns, and then fit
your content columns
inside these imaginary
columns.
Grid
Container

Grid
Item
Grid Spacing
Material Design margins and columns follow an 8px square baseline grid.
The spacing property is an integer between 0 and 10 inclusive.
By default, the spacing between two grid items follows a linear function:
output(spacing) = spacing * 8px

<Grid container spacing={2}> means a 16px wide gap between

items of that container
Fluid Grids
● Grows and shrinks with the available space in the browser viewport
● Fluid grids use columns that scale and resize content.
● A fluid grid’s layout can use breakpoints to determine if the layout needs
to change dramatically.
● Columns can have multiple widths defined, causing the layout to change
at the defined breakpoint.
https://material-ui.com/customization/default-theme/
 The column widths apply at all breakpoints (i.e. xs and up).
<Grid item xs={12}>
Your grid item content goes here
</Grid>

Gid items with multiple breakpoints (i.e. full width on xs and half on sm+).

<Grid item xs={12} sm={6}>

I take the full width on xs screens,
but only half
the width on
sm and above
screen sizes
</Grid>
Auto Layout <Grid container spacing={3}>
<Grid item xs>
This is auto
● The Auto-layout makes the
items equitably share the </Grid>

available space. <Grid item xs={6}>

This needs to use 6 columns
● You could set the width of on screen widths xs and above
one item and the others will </Grid>
automatically resize around it.
<Grid item xs>
This is auto
</Grid>
</Grid>
Some useful references
● About CSS Flexbox - https://css-tricks.com/snippets/css/a-guide-to-
flexbox/
○ https://flexboxfroggy.com/

○ https://www.internetingishard.com/html-and-css/flexbox/

● Go through some live Material UI Examples - https://material-

ui.com/discover-more/showcase/
● For eveything to do with Material UI documentation - https://material-
ui.com/
www.missionreadyhq.com

Thank you Sebin Benjamin

[email protected]