Material UI - Blog

What is Material-UI?

Leave a reply
More about Rishabh Sharma
  Rishabh Sharma
  16 Jul 21

INTRODUCTION

Here we will discuss material-UI 

What is it?  Why are people using it and how do we set it up in our next react application? So if you didn’t hear of it before, then it’s time to learn some of its major applications. We will create some buttons, headers, and other useful components and also apply some themes.

MATERIAL-UI

Material-UI is a number of pre-made components ready to go for your next website or application. Things like buttons, header, sizing, colors all of that are ready in the material UI library, and all you have to do is just import it and use it in your react application. It has its own components similar to the bootstrap. We can change its look and feel by overriding the CSS properties like bootstrap, but most of the component styling is possible through props in material UI.

Material UI is built on the material design docs by Google, and this flows in a number of architectures to make things look really good in terms of spacing, colors, and even animation. This was designed and developed by the Google team to help build high-quality experiences be it on Android, IOS, or on the Web. This library can be seen on popular android systems and lots of applications today due to its popularity. Whether you know it or not but you use this already in terms of UI design.

I assume that you are already familiar with the create-react-app and have already set up a brand new react app, so next, we will install the material UI in our new app.

HOW TO INSTALL MATERIAL-UI IN REACT APP

  • npm install @material-ui/core | yarn add @material-ui/core
  • Material UI also provides a bunch of cool-looking icons, we will include them too.
  • npm install @material-ui/icons | yarn add @material-ui/icons

IMPORT YOUR FIRST MATERIAL-UI COMPONENT

Let’s begin with the button component.

App.js

import "./styles.css";

import Button from "@material-ui/core/Button";

import Save from "@material-ui/icons/Save";

export default function App() {

  return (

    <div className="App">

      <h1>Material-UI</h1>

      <Button

        onClick={() => alert("SAved!")}

        startIcon={<Save />}

        variant="contained"

        color="primary"

        disabled="false"

      >

        Save

      </Button>

    </div>

  );

}

As you can see, I have imported the Button from @material-ui/core/Button. This button is different from the regular HTML button because it starts with a capital case.

I also imported a ‘Save’ icon from @material-ui/icons/Save, which we will use in our button component.

The button component has some props applied, which are used to change its behavior and functionality.

  • OnClick handles how a button click will function.
  • StartIcon has a value of our ‘Save’ icon which we imported earlier.
  • Variant means what kind of look a button will give, it has three types – outlined, contained, and text.
  • Color will tell what the color button should be. Basically, it is primary and secondary, and we can change them while creating themes for our components (we will get to it very soon).
  • Disabled will assist you to disable the button when the passed prop is ‘true’.

I suggest you go to buttonApi props on the Material-UI site and learn about other useful and amazing props –  https://material-ui.com/api/button/#button-api

You can see below or go to the code Sandbox and play around with these props for a better understanding of what material UI designing is all about.

Code Sandbox –

Link to code sandbox:- https://codesandbox.io/embed/distracted-banach-3el5l?fontsize=14&hidenavigation=1&theme=dark


Creating Material-UI theme

We need to import few more things in order to create our custom theme using material UI

To begin with, we create our theme.js file and import createMuiTheme from @material-ui/core/styles after that we’ll create an object of createMuiTheme and provided it with our custom primary and secondary colors.

theme.js

import { green, yellow} from "@material-ui/core/colors";

import { createMuiTheme } from "@material-ui/core/styles";

const theme = createMuiTheme({

  palette: {

    primary: {

      main: green[500]

    },

    secondary: {

      main: yellow[400]

    }

  }

});

export default theme;

 

  • Now to use this file in our app.js we’ll need to import it.
  • Now we need one more import which is a high-level component, we’ll import ThemeProvider from @material-ui/core, and 

Wrap our whole JSX with this higher-order component, and after that, we just need to pass our theme object in theme props of ThemeProvider.

  • And boom your custom colors are reflected in your app now.
  • Try to play with the palette and change the color to see the magic.

*Note – Material UI has three categories in its primary and secondary color scheme – Light, Main, and Dark.

It is not necessary to provide light and dark color to the palatte, because material UI creates light and dark versions of the main color by itself.

*Note – I added a Header.js also for the AppBar (it is just a material-UI component like button, so nothing to bother about)

*Note – creating reusable component are also very simple with material-UI

Link to sandbox:- https://codesandbox.io/embed/distracted-banach-3el5l?fontsize=14&hidenavigation=1&theme=dark

See the below code for reference.

import "./styles.css";

import Button from "@material-ui/core/Button";

import Save from "@material-ui/icons/Save";

import { ThemeProvider } from "@material-ui/core";

import theme from "./theme";

import ButtonAppBar from "./Header";

export default function App() {

  return (

    <ThemeProvider theme={theme}>

      <ButtonAppBar />

      <div className="App">

        <h1>Material-UI</h1>

        <Button

          onClick={() => alert("SAved!")}

          startIcon={<Save />}

          variant="contained"

          color="secondary"

        >

          Save

        </Button>

      </div>

    </ThemeProvider>

  );

}

 

BOTTOM LINE

We can provide our custom theme in the app through higher-order components but in order to override or write additional CSS for our components, we need one more thing which is makeStyles object of material-UI that is used to create additional CSS for the component inside our existing file.

-In this app, we will change the title color from black to red.

What changes we did in the existing code –

import { makeStyles } from "@material-ui/core";

const useStyles = makeStyles((theme) => ({

  root: {

    color: "red"

  }

}));

return(

<h1 className={classes.root}>Material-UI</h1>

)

Providing CSS to material UI components is so simple, you’ll surely going to like it.

Material-UI is one of the best UI design libraries for reacting because react and material-UI both works on props, and the developer who is familiar with state and props will easily grasp the functioning of material-UI components.

Leave a Reply