DEV Community

Cover image for Cracking the code: Material UI
Malissa Bishop
Malissa Bishop

Posted on • Updated on

 

Cracking the code: Material UI

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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}
    />
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (1)

Collapse
 
deepcodes profile image
Deepankar Bhade

instead of using carbon for showing code blocks

you can use markdown for better reading purpose.

console.log('Hello World')
Enter fullscreen mode Exit fullscreen mode

Top Posts from the React Ecosystem

1. Changes In The Official React Documentation

The former React Docs Beta has been officially released as the updated React documentation at react.dev after years of hard work and refinement. Check out the brand new React Docs: What’s New in the Updated React Docs

2. CRA's Time is Over

React developer team has removed create-react-app (CRA) from official documentation rendering it no longer the default setup method for new projects. The bulky setup, slow, and outdated nature of CRA led to its removal: create-react-app is officially dead

3. How to Fetch Dev.to Articles for Your Portfolio

Integrate the articles of your Dev.to profile into your personal portfolio with either React, Vue, or Next.js by following these simple steps. It outlines how to include frontend to pull the information and correctly utilizes the Dev.to API: How to Fetch Your Dev.to Articles for Your Portfolio with React