Cracking the code: Material UI

#react #uiweekly #css #webdev

WHY?

Here I am, back again to lay out the simplicities of programming. If you can find yourself to combine simple and programming in the same sentence... My first experience with Material UI, wasn't the best nor the easiest. It felt as if I was learning another language, but again like my last post...WHY? would we want to learn and implement Material UI into our projects?

THE PRELUDE!

I prefer to express concepts in a simplistic form. More often than not, learning and applying new languages can be difficult with some of the documentation we find online. I'd like to change that; With understanding the purpose and the problem a language or framework library is solving. I mean I don't mind almost going bananas, to simplify learning for new web devs on their journey. So...

WHAT IS MATERIAL UI?

Material UI is a component library made for react to streamline a faster, easier web development and user experience. Basically, Material UI allows us to style our react applications with prebuilt buttons, navigation bars, grid systems, etc. Everything from their library is styled following their very own specifications. It even integrates best coding practices, so that users and developers can easily understand and navigate your project. If you're familiar with Bootstrap, it's quite similar, but designed by Google and quite fancier if you ask me! No shade to Bootstrap though.

IMPLEMENTING MATERIAL UI.

FIRST THINGS FIRST...

To get started, and view changes to the styling of our webpage, we have to install a few things.

// in your terminal, run
npm install

// then to view our website in the browser, run
npm start

In order to use Material UI within our code editor, we must install all the dependencies necessary to implement styling. Otherwise, it wouldn't alter the design of our webpage.

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

// with yarn
yarn add @mui/material @emotion/react @emoticon/styled

We're now able to style our components, and import from Material UI.

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

const useStyles = makeStyles ({
   page: {
     margin: '10px',
     display: 'flex',
     paddingLeft: 200,
     paddingTop: 70
   }
});

function AlbumCards ({ props }) {
     const one, two = props

     const classes = useStyles()
return (
   <div className={classes.page}>
   <Box>
   <Grid item xs={12}>
   <Card variant='elevation'>
    <CardHeader
      title={one}
      subheader={two}
    />

In the above example, we declare a variable and set it equal to makeStyles. We also have to declare another variable inside our function to call makeStyles. In React, always use camel casing to apply styling, such as 'paddingLeft'.

Now we're set to apply our newly created styling components as a className or call the component in our return. So enough of my post, start creating and happy programming!