How Developers Can Utilize MUI In ReactJS Projects?
JohnElger
18 views
11 slides
Aug 29, 2022
Slide 1 of 11
1
2
3
4
5
6
7
8
9
10
11
About This Presentation
In this article we will learn how developers can utilize MUI in while developing any application in any ReactJS projects. Learn more about MUI & its importance in ReactJS.
Slide Content
How Developers Can Utilize MUI In ReactJS Projects? MUI was initially developed as a Material Design implementation just for React apps. To develop a user interface in our React applications, we can simply import and use several components from the Material-UI package. As a result, the developers can save a lot of time by not having to write everything from start. You can use it with MUI, formerly known as Material-UI, to create applications and websites. Initially, MUI was a version of Material Design made just for React applications.
How to include MUI into a React app To use the Material-various UI’s features or components, we must first install it. Make sure you are in the master folder for your application when you open your terminal. npmi @ mui /material You can use both typeface icons and SVG icons with Material-UI. Add the following code to your public/index.html file’s <head> tag to use font icons <link rel =" stylesheet " href ="https:// fonts.googleapis.com/ icon?family = Material+Icons ">
npm install @ material- ui /icons Import React from “react”; import Button from '@ mui /material/Button'; function App() { return < Buttoncolor ="primary" variant="contained">Hello World</Button>; } Run the command and install @material- ui /icons as a dependency to use SVG icons. Example :
<button disabled="disabled"> Disabled </button> OutPut : Import React Example2: import React , { useState } from 'react'; import Button from '@ mui /material/Button'; import { makeStyles } from '@ mui /styles'; import Box from '@ mui /material/Box';
constuseStyles = makeStyles (() => ({ btn1:{ width: '50%', height: '50%', padding: '20px' }, btn2:{ backgroundColor : 'black', borderRadius : '50px', marginLeft : '20px', marginBottom : '20px' }, btn3:{ marginLeft : '20px' } }))
constButtton = () => { const classes = useStyles (); return ( <div><button>Click Here</button> <button>Click Here</button> <button>Click Here</button> <button>Error</button> < LoadingButton style={{ marginLeft : '20px',marginBottom: '20px' }} loading loadingPosition ="start" startIcon ={} variant="outlined" > Loading<button> Upload <input hidden="" accept="image/*" multiple="multiple" type="file"> </button> <input hidden="" accept="image/*" type="file"> </div > ) } export default Buttton </div>
OutPut : ButtonGroup : We can create our own component to group various buttons. But to make things simpler for us, Material-UI offers a different component named ButtonGroup . This component can be used to group buttons that are related.
Example: const buttons = [ <button>One</button>, <button>Two</button>, <button>Three</button>, ]; return ( <div><button>One</button> <button>Two</button> <button>Three</button>{buttons} {buttons} </div > ) } </div>
OutPut : medium secondary button group
Conclusion : It’s simple to include Material Design into the output of your React application by using the Material-UI component library. You have learnt how to set up and use Material-UI in your React project in this tutorial, as well as how to build a sample application for a real-world setting from scratch . At Bosc Tech Labs you can hire an experienced React Developer team who will provide you high-end and outstanding applications for your business. If you have any query, feel free to contact us.
Tags
Categories
DesignDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 18
- Slides 11
- Age 1191 days
Related Slideshows
1
MGV Residential Design projects for different clients, including a New Mexico Adobe project-1-.pdf
mannyvesa
27 views
16
EUNITED_Advocacy and Public Engagement through Visual Media
GeorgeDiamandis11
32 views
31
DESIGN THINKINGGG PPT 2 TOPIC IDEATION.pptx
HibaZaidi2
25 views
36
DESIGN THINKING CHAPTER 1 PPTT PPT 1.pptx
HibaZaidi2
29 views
112
Hinduism and Its History - PowerPoint Slides.pptx
ConorMcCormack10
25 views
20
Service Attributes of Manufactured Parts.pptx
MustafaEnesKrmac
25 views