Material-UI is one of the most popular React UI libraries. Material-UI components work in isolation. They are self-supporting, and will only inject the styles they need to display. They dont rely on any global style-sheets such as normalize.css.
How to check which tab is active using Material UI ?. The Complete React Native Developer Course 2023 [Videos].
Some examples of Material UI components are Dialog, Tabs, Text Field, Menu, Chip, Card, Stepper, Paper. To use Material-UI in React we need to install it manually in our project.
- Basic knowledge of React
- Any Code Editor (sublime text editor, VS Code, etc.)
Route Map to Solution
- Create a Sample Project
- Install Material — UI into Project
- Implement Tabs Example
- Applying Final Solution
A) Create a Sample project:
- Create a sample React Project by running the following command in your terminal
npx create-react-app react-material-ui
- The above command will create a React app boilerplate within the path the command had run in and ensures that you always use the latest version of a generator or build tool without having to upgrade each time youre about to use it.
- Enter into the project folder by typing the following command
- Run the Project by using the command
- You should be able to see the following in your browser
B) Install Material — UI into Project:
- Install Material-UI by using the below command in your terminal. You can use the terminal of VS Code also.
npm install @material-ui/core
- Now look for App.js in the src folder of your project. Remove all the unnecessary code and add some code if we are on the right path.
- You will observe the browser getting updated as soon as you save your changes. Now everything is set to write our example.
C) Implement Tabs Example:
- Its time for your code editor. Create a file named TabsExample.js in your src folder and paste the following code into it.
- The screen will look like this:
Now its time for the actual things. Lets see the approach for the solution
D) Applying Final Solution:
- The idea is to use the onChange Callback which is fired automatically when a Tab value changes
function(event: object, value: any) => void
event: The event source of the callback value: The index of the child (number)
- Now update the App.js file with the below code: