Use your MakeStyles!

makeStyles package basics, offered by Material UI

Photo by Federico Respini on Unsplash

When using Material Ui, you get access to a bunch of different tools on top of styled components. makeStyles is a function that allows you to use JavaScript to styles your components. makeStyles uses JSS at its core, this essentially translates JavaScript to CSS. What makes this a great option is that it runs when the page is requested on the server side.

1. Importing

In order to use makeStyles function in your application you will need to import it in the component in where you plan to access the css that results from your makeStyles function. This is assuming you have already installed Material Ui in your project.

*//* ../src/yourComponent.js
import { makeStyles } from '@material-ui/core/styles';

If you wish to separate your styles file from your main component you will still need to import makeStyles . If you do decide to separate styles from your component you will need to name it like so IE: yourComponent.styles.js
This is in order for react to recognize it as a styles file. Conventionally you can assign makeStyles to a variable called useStyles but it is up to you.

2. The Arguments

makeStyles accepts a function as an argument with return value being an object with the key value being the className or id. The className in turn should be in reference to the selector that is being styled. The value for the class should also be an object but with your regular css styling.

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

const useStyles = makeStyles({
  yourClassName: {
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    border: 0,
    borderRadius: 3,
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
    color: 'white',
    height: 48,
    padding: '0 30px',
  },
});

I would like to point out that css properties like border-radius, or box-shadow are recognized by changing them to camel case. Additionally the value for the properties finish with a , instead of the usual ; after each style.

3. Destructuring

For better clarity and easier accessibility I highly recommend destructuring the object you receive from makeStyles or useStyles. Destructuring allows you to extract multiple properties at a time from and object or array. Below makeStyles is created, and exported as useStyles, in a different file to ensure separation of concerns. useStyles is then invoked and assigned to classes, which can now be destructured in the following line.

*//* Subheader.styles.js
const useStyles = makeStyles(() => ({...}));
export default useStyles;
*//* ./Subheader.js
import useStyles from '../Subheader/Subheader.styles.js';

export default function Subheader() {
const classes = useStyles();
const {
  subheaderContainer,
  subheader,
  subheaderItems,
  subheaderIcon,
  mainText,
  subText,
  closeIcon,
} = classes;
return (
<div className={ subheaderContainer }>
   <div className={ subheader } >
     <div className={ subheaderItems }>
       <div className={ subheaderIcon }> an imaget </div>
     </div>
   </div>
</div>
)}

Assigning an object with all the classNames created in our makeStyles function, we can now give each element their corresponding className instead of having to use dot notation. Ie: classes.subheaderContainer

4. Passing Arguments

Depending on what route you end up choosing you can pass arguments into useStyles or your makeStyles in order to adapt your style depending on a condition.

*//* ./Subheader.js
import useStyles from '../Subheader/Subheader.styles.js';
export default function Subheader() {
const classes = useStyles( props );
....
}

Take for example the subheader className created below, if the background color should be dependent on where it is being used, pass the color as an argument. Access the argument in the style section with a the help of an arrow function.

...
 subheader: {
   display: 'flex',
   flexDirection: 'row',
   alignItems: 'center',
   justifyContent: 'center',
   height: '90px',width: '100%',
   backgroundColor: ( props ) => props.color,
   top: '64px',
   borderRadius: '0px',
   overflow: 'hidden',
},
...

This is great if you are attempting to make a component more versatile and modular.

5. Theme

makeStyles comes with the option of passing theme as an argument. Theme in turn comes from a preset object created by material UI which can be found here. This is a great option if you are attempting to make your component responsive since theme comes with preset breakpoints that you can access for your styling.

const styles = theme => ({
  root: {
    padding: theme.spacing(1),
    [theme.breakpoints.down('sm')]: {
      backgroundColor: theme.palette.secondary.main,
    },
    [theme.breakpoints.up('md')]: {
      backgroundColor: theme.palette.primary.main,
    },
    [theme.breakpoints.up('lg')]: {
      backgroundColor: green[500],
    },
  },
});

Break points are great when attempting to create a website that is mobile friendly. By using the predetermined points engineers can focus more on the nitty gritty details of what to place inside the component.

Material Ui offers a ton of functionality when it comes to working along side with react. For those of us who have difficulty with css Material Ui is a great companion.