How to Easily Style Your Website

A Quick Guide to Material UI

Have you ever found a website that look super barebones, yet ends up having a big back-end that is able to do everything you went there for and more? There’s a lot of very talented developers who can create amazing back-end websites with crazy algorithms and insane data structures. However, a lot of these developers are not full-stack, and could use a little bit of help in the design compartment. If this is you or you know someone who may need help in this area, get ready to learn an easy way to style without an in depth knowledge of CSS! That solution is known as Material UI, or mui!

Installing MUI

To install mui, all you have to do is go to your console in the project folder and type the following:

npm install @mui/material

And you’re all set! From there, it’s smooth sailing. Everything else you need is in their documentation. Let’s go through and create some simple UI components that you might see anywhere, like a button and a menu bar!

Creating the Button

Creating a button is super simple. All of the code you need is provided in their button documentation under the components tab. To get started, you’ll have to add this line of code to access their button properties:

import Button from '@mui/material/Button';

Then you have access to numerous button styles! Let’s create a delete button to show the power of mui.

To start off, making a button is pretty simple. You can type:

<Button>Delete</Button>

Pretty simple, right? But mui comes with so much more. Let’s add some extra style to make it pop! Let’s start by making a “variant” property on the button. This will change the style in numerous ways (eg. making it just text with no border, setting the color inside of the button, or making it just a button outline with no inner color). We’re going to make it red by using the error variant! While we do this, let’s also add an icon inside of the button! This will make it more unique to the user and help them find where the option is real quick. We’ll add a trash can icon by using either the “startIcon” or the “endIcon” property to add one of their preset icons into the button, like so:

--variant makes the button a red box, startIcon adds a delete icon!<Button variant="contained" startIcon={<DeleteIcon />}>
Delete
</Button>

Now we have a simple button with barely any code and no CSS required! Time to move onto a more complex topic, a menu bar.

Creating the Menu Bar

Creating the menu bar is going to be quite a bit more work. But don’t worry, it doesn’t require any CSS and it will look great!

Let’s get started with the dependencies. We’re going to need a lot of things since we’re adding a lot of content. It’s pretty straight forward which one is for what, so take a quick read through them:

import * as React from "react";import AppBar from "@mui/material/AppBar";import Box from "@mui/material/Box";import Toolbar from "@mui/material/Toolbar";import Typography from "@mui/material/Typography";import Button from "@mui/material/Button";import Menu from '@mui/material/Menu';import MenuItem from '@mui/material/MenuItem';

For this menu, we’ll be adding a top bar with a title and a dropdown button of options! To start, let’s work on the dropdown functions:

export default function TopMenu() {
const [anchorEl, setAnchorEl] = React.useState(null);
const open = Boolean(anchorEl);
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchor(null);
};
}

This function determines if the button is clicked or not and sets it to be opened or closed. Next, let’s get the top bar in place!

return (
<Box sx={{ flexGrow: 1 }}>
<AppBar position="static">
<Toolbar>
<Typography variant="h6" component="div" sx={{ flexGrow: 1}}>
My Website
</Typography>
</Toolbar>
</AppBar>
</Box>
);

Now, all we have to do is add the dropdown menu into the return, and implement the function we made earlier! This will add quite a bit of code.

Make sure you add this right between the </Typography> and the </Toolbar>

<div>
<Button
variant="h6"
id="basic-button"
aria-controls="basic-menu"
aria-haspopup="true"
aria-expanded={open ? 'true' : undefined}
onClick={handleClick}
sx={{ flexGrow: 1 }}
>
Menu
</Button>
<Menu
id="basic-menu"
anchorEl={anchorEl}
open={open}
onClose={handleClose}
MenuListProps={{
'aria-labelledby': 'basic-button',
}}
sx={{ flexGrow: 1 }}
>
<MenuItem onClick={handleClose}>Profile</MenuItem>
<MenuItem onClick={handleClose}>My account</MenuItem>
<MenuItem onClick={handleClose}>Logout</MenuItem>
</Menu>

And that’s it! All together, you should have a menu bar with a dropdown and your code should look like this:

import * as React from "react";
import AppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
import Button from "@mui/material/Button";
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
export default function ButtonAppBar() {
const [anchorEl, setAnchorEl] = React.useState(null);
const open = Boolean(anchorEl);
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
return (
<Box sx={{ flexGrow: 1 }}>
<AppBar position="static">
<Toolbar>
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
News
</Typography>
<div>
<Button
variant="h6"
id="basic-button"
aria-controls="basic-menu"
aria-haspopup="true"
aria-expanded={open ? 'true' : undefined}
onClick={handleClick}
sx={{ flexGrow: 1 }}
>
Menu
</Button>
<Menu
id="basic-menu"
anchorEl={anchorEl}
open={open}
onClose={handleClose}
MenuListProps={{
'aria-labelledby': 'basic-button',
}}
sx={{ flexGrow: 1 }}
>
<MenuItem onClick={handleClose}>Profile</MenuItem>
<MenuItem onClick={handleClose}>My account</MenuItem>
<MenuItem onClick={handleClose}>Logout</MenuItem>
</Menu>
</div>
</Toolbar>
</AppBar>
</Box>
);
}

Conclusion

The more you practice, the more you’ll get used to using mui. It’s an amazing tool that helps lots of developers who aren’t very good with CSS or don’t want to take the time to learn it. Good luck on your journey, and hopefully this knowledge can help make your future projects look better than ever!

--

--

--

Software Engineer and Indie Game Developer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Javascript is easy, algorithms are harder…

Tricky Questions You Might Face in Javascript Job Interview

Laravel Tips: Mixed Content Error

A small hack to figure out our code problem with Async Queue

A simple way to update your Web App in Vue Js

Adventures in Validation

Constraint Object Example

Optimizations by Angular

Connect to firebase emulator to call a function from the iOS side

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Trestin Ishak

Trestin Ishak

Software Engineer and Indie Game Developer

More from Medium

Goodbye, Boredom. — An Activity Suggestion App

How real-world web-based applications and software are built

My Grocery List and Meal Idea App: LISTLESS

My homepage!

Clean Code React Project