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!