Material UI | ReactJS AppBar
Material-UI is a library that provides React components for easy and fast web development. We can easily put together really aesthetic and functional components and make it work according to our use as all the components are configurable. This saves a lot of time as we don’t have to struggle with CSS to make things presentable. Material-UI components work in isolation. They are self-supporting, and will only inject the styles they need to display.
You’ll learn how to set up and use Material-UI in your React web application as we build a demo ” Sign In ” application.
As you can see the user interface consists of material design elements. We’ll use Material-UI components to display a Sign In form to the user. The application consists of an App Bar on top which contains the title of the application, two text field which is used to input email and password and a Button to Sign In.
Generating The React Project: First, we need to create a new React project. This can be done by using the create-react-app script in the following way:
npx create-react-app signin-material-ui
After executing this command a new project directory signin-material-UI is available. Change into the newly created project folder and you’ll find the React starter project.
Start your React project by:
Installing Material-UI Library & Dependencies: To be able to use Material-UI components we have to make sure that we have installed it on our project which can be done by:
npm install @material-ui/core
Implementing The Sample Application: Deleting The Default Content, before starting building our project we need to delete the default contents of the project responsible for the start screen by:
- Select all files in the src folder and delete them.
- Create a new file index.js in the src folder.
Now we can add our own code to the index.js file.
Components we will be using :
|Component Name||Props Used||Description|
|AppBar||position||The positioning type.|
|Button||variant||The variant to use.|
|color||The color of the component.|
|fullwidth||If true, the button will take up the full width of its container.|
|Text Field||variant||The variant to use.|
|margin||If dense or normal, will adjust vertical spacing of this and contained components.|
|required||If true, the label is displayed as required and the input element` will be required.|
|fullWidth||If true, the input will take up the full width of its container.|
|id||The id of the input element. Use this prop to make label and helperText accessible for screen readers.|
|label||The label content.|
|name||Name attribute of the input element.|
|type||Type of the input element. It should be a valid HTML5 input type.|
|autoComplete||This prop helps users to fill forms faster, especially on mobile devices.|
|FormControlLabel||control||A control element. For instance, it can be a Radio, a Switch or a Checkbox.|
|label||The text to be used in an enclosing label element.|
|Checkbox||value||The value of the component. The browser uses “on” as the default value.|
|color||The color of the component.|
|variant||Applies the theme typography styles.|
|Grid||container||If true, the component will have the flex container behavior. You should be wrapping items in a container.|
|item||If true, the component will have the flex item behavior. You should be wrapping items in a container.|
|Typography||variant||Applies the theme typography styles.|
|Container||component||The component used for the root node. Either a string to use an HTML element or a component.|
|maxWidth||Determine the max-width of the container. The container width grows with the size of the screen. Set to false to disable maxWidth.|
Importing Above Components: We have to import these components before we can make use of them in our project by writing import statements for every component in our index.js file along with necessary import statements of React and ReactDOM.
import React from
import ReactDOM from
import AppBar from
import Toolbar from
import Button from
import TextField from
import FormControlLabel from
import Checkbox from
import Link from
import Grid from
import Typography from
import Container from
Creating Signing function: First, we will create a container element inside the SignIn function which will be used in wrapping all the components.
ReactDOM.render(<SignIn />, document.getElementById(
Creating an App Bar component:
Output: We did not included any component, there is only a title.
Creating Sign In form component: The form will contain two text fields each for email and password, a remember me checkbox, a Sign In button, and some links.
// Email Textfield
// Password Textfield
// Remember Me Checkbox
// Sign In button
<Grid item xs>
// Forgot Password link
// Sign Up Link
"Don't have an account? Sign Up"
Output: By making this component, we have completed our project.
Complete Code: This is index.js if you clear the src folder and created a single indes.js file.
Please Login to comment...