What is material ui?

• Material-UI is simply a library that allows us to import and use different components to create a user interface in our React applications. This saves a significant amount of time since the developers do not need to write everything from scratch.
• Material-UI widgets are heavily inspired by Google’s principles on building user 

interfaces. It is, therefore, easy for developers to build visually-appealing applications.

Step 1 – Getting started

• Navigate to your desired folder and create a React project by typing the following command in a terminal or cmd.

• Once the installation is complete, open the folder in your code editor. Then, type npm start to launch the development server. You can view the default React application by navigating to https://chq.pkq.mybluehostin.me/staging_sana2:3000/ in your browser.

Step 2 – Installing the Material-UI dependencies

• We must install the Material-UI to access its different functionalities or components. Open your terminal, and ensure that you are inside your application’s master folder.
• Type npm install @material-ui/core in the terminal and click enter.
• Run the command below to use Material-UI icons in our project.

Step 3 – Using Material-UI components

1. To use Material-UI components, we first need to import them into our project. This is done, as shown below.

• When you refresh your browser, you will see three different types of buttons as shown below

• In similar fashion you can import Material components and use it in your project
• And there are tons of prebuilt components in Material ui which you can use in your project and it will have full responsiveness out of the box ,and also you can customize according to your needs.

• You can learn more about Material Installation and getting started on their official documentation 

Advantages of Material-UI 

1] More Than Just a Set of Guidelines

What makes Material Designs different from design guidelines in general is the fact that it is an entire ecosystem. In other words, it has predefined solutions for different design situations through use cases that can be easily referred to by the designers. This feature is a favourite with UI designers.

2] Access to Systematic Documentation

Like all other products of Google, Material Designs also comes with the Google “advantage” and in this case there exists detailed documentation to help designers understand, explore and start using the set of guidelines without any trouble. This support is much welcomed by designers across the globe who find it easy to start using Material Designs.

3] The Element of Flexibility

In spite of the fact that Material Designs has predefined guidelines for every design scenario, it also offers an element of flexibility. The designer has the freedom to work with the different design elements and choose how to implement them. Thus, it offers the perfect balance of rules and flexibility, allowing the designers to apply their creativity.

4] More Intuitive in Nature

While design is subjective and opinions about a design vary from one person to the next, it has been observed that the Material Designs layouts can be considered to be more intuitive for most users, as compared to the more flat design approach that existed earlier. This is one of the factors behind the widespread use of Material Designs.

5] Ideal Design System for Mobile Apps

Material Designs is one of the most compatible design systems for mobile apps as it was originally developed for designing Android applications. Since mobile apps are increasing with the growth in the number of smartphone users, this design system is gaining popularity with UI designers across the globe.

Material Designs has also launched the Dark Theme which offers more flexibility to the designers in terms of experimenting with designs.

Delightful Things about Material-UI

Whether you go gaga for Material Design or gag looking at it, the “card” or “paper” concept with a focus on surfaces and edges continues to be a popular and broadly applied application style.

Material-UI, the React component library based on Google Material Design, allows for faster and easier stylized web development. With basic React framework familiarity, you can build a deliciously material app with Material-UI, and its almost like cheating. Almost.

This MIT-licensed open source project is more than just parlor tricks though and can get deep quickly. But don’t let me scare you! I recently built an app with Material-UI for the first time, and by the end I was delighted. Here are 5 things I appreciated about Material-UI:

1] It’s well documented

The official documentation is organized and easily navigable. The library’s popularity means you have access to tons of code examples on the web if the documentation is confusing. You can also head over to StackOverflow for technical Q&A from Material-UI devs and the core team.

2] Regular updates

With the recent release of Material-UI v4 (May of 2019) and blog posts with new features and future goals posted monthly, Material-UI doesn’t look like its dying down anytime soon. Along with feature updates and improvements, here are the GitHub stats from the latest blog posted November 8th:

We have accepted 182 commits from 68 different contributors. We have changed 1,157 files with 31,312 additions and 9,771 deletions.

3] Consistent appearance

Okay, this is kind of cheating because its a library, so of course the appearance is going to be consistent. BUT Material-UI is a HUGE library, and the benefit is you have some choices.

Aesthetic preferences for Material Design aside, your web project has a high chance of retaining similarity in appearance and functions all throughout.

4] Creative freedom

You don’t have to have a consistent appearance if you don’t want to!

I know, I know – I just said that it creates a consistent appearance, but that’s out of the box. As I hinted at earlier, there is actually quite a lot of depth to the Material-UI components and the developers encourage customization. Material-UI doesn’t force Material Design style on you, it just offers it.

One delightful component was the ThemeProvider. Placed at the root of your app, you can change the colors, the typography and much more of all sub-Material-UI components! However, this is optional; Material-UI components come with a default theme. Code magic.