Customizing Material UI Components

Material UI is a popular React framework of styled components such as navigation bars, buttons, accordions, drop-down menus, and pop-ups, to name a few, with customizable options to override their default settings. In this blog post I will go over the Material UI function, makeStyles, that lets you customize your components quite easily.

After installing Material UI into your project, the first step is to import makeStyles from material-ui into a component file.

import { makeStyles } from '@material-ui/core/styles'

Then, outside of your class or functional component function (this article has functional component examples), assign makeStyles() to a variable. It is commonly assigned as useStyles. Inside the makeStyles() function are going to go an object of objects with styling attributes assigned to keys that will be used as classes.

makeStyles declared outside of functional component

As you can see, I have styling properties assigned to keys I want to use for certain elements. Here, I have positive, neutral, nightmare (it is a dream app) and I want to style my dream cards with different backgrounds depending on what type of dream it is and I also have some styling for chip backgrounds.

Inside your functional component, assign useStyles() to a class variable.

const classes = useStyles()

Now, for the elements you are rendering. I’m using a .map function to iterate over my dreams and create cards that will either have ‘positive’, ‘neutral’, or ‘nightmare’ classes with chips. This is what mine looks like:

If you look at the bottom of the image above with the Chip element, you will see I am giving it the class of {classes.chips}. The Chip element is using the background property I am using from makeStyles(). My Card element at the top is also doing the same thing where it says ‘{[dreamColor(dream)], ‘dream’} except that it is assigning it two classes as well as the dreamColor function I am invoking is running a switch-case statement that is determining wether it should be giving the ‘positive, ‘neutral’, or ‘nightmare’ class. It is probably not going to be relevant to your project but my function looks like this so you know what I am talking about:

const dreamColor = (dream) => {
  switch (dream.type) {
    case 'positive':
      return classes.positive
    case 'neutral':
      return classes.neutral
    case 'nightmare':
      return classes.nightmare
    default:
      return null
  }
}

And that is all you need to customize your Material UI components! There are several other ways to do it along with using normal CSS, although, you can’t use CSS for many styling properties for elements such as the background with some Material UI components such as the cards.

My DreamWave web app