Material-UI

Question 1

What is material UI?

Answer 1

It is just a React UI library, which provides pre-baked, react components.

Question 2

How MUI provides different variants of a single component?

Answer 2

By providing different “props”/properties, we can use different variants of same component.

Question 3

How a new person can read about different variants of any component?

Answer 3

It provides we formed documents, which provides information about each component APIs and different variants.

Question 4

How to install MUI in react?

Answer 4

It is done by installing three important libraries:

1. mui/material
2. emotion/react
3. emotion/styled

Question 5

What is emotion library?

Answer 5

Emotion is an styling engine, which helps in writing CSS with javascript.

Question 6

Which CSS library is used by MUI?

Answer 6

emotion

Question 7

How to import any component from MUI?

Answer 7

Using following import statement:

import Button from ‘@mui/material/Button’

Question 8

How can we change the variant of the button?

Answer 8

It can be changed by using property as “variant” and the different value of the property e.g.
My Button

Question 9

Can we disable a button by using property?

Answer 9

Yes, we can use “disabled” property to make any button as disabled.

Question 10

How to add a on-click event on a button?

Answer 10

This is done by using “onClick={}” property to the button. Any function passed to this function, will get executed once a user click over the button.

Question 11

Does Icons included in MUI package?

Answer 11

No, we need to install it separately.

Question 12

How can we install the icons requirements?

Answer 12

Using MUI’s “icons-material” package.

e.g. npm install @mui/icons-material

Question 13

What is the purpose of “export default”?

Answer 13

This is required when we want to export only a single value from a file which can be:

1. Class
2. Function
3. Object

Question 14

What is a component in React?

Answer 14

It is nothing but a “function” which is exporting a react element.

Question 15

How to consume a “component’ inside the “app.js’ file?

Answer 15

Import the react component and then call same just like a html tag.
e.g.
import NavBar from ‘./components/nav-bar/navBar.js’

<div>

</div>

Question 16

Explain the step by step process of adding a component from MUI to our app.js?

Answer 16

1. Go to MUI website
2. Go to Components section
3. Search for required component
4. Copy the component code only (with tags)
5. Copy all the import files
6. Save same inside our custom component.
   Reload and enjoy !!!

Question 17

What’s the purpose of “consts” folder and how should we use inside our components?

Answer 17

The purpose of “consts” folder is to create different constants, which can be imported inside our components.
e.g. all navigation items, must be added inside the const folder, so that, we can change same, if there is any requirement.

Question 18

How to find out the “material-icons”?

Answer 18

Just go to the MUI website and search for Material ICONS.

Question 19

How can we add icons inside the drawer?

Answer 19

Simply copy the import statement and call the component inside the other component using tags:
e.g.