Download
1 / 11
120 likes | 143 Views
MUI was initially developed as a Material Design implementation just for React apps.<br><br>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.<br><br>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.<br><br>A new design framework that will compete with Material Design is being developed by the brand as it grows t
E N D
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">
Run the command and install @material-ui/icons as a dependency to use SVG icons. npm install @material-ui/icons Example: Import React from “react”; import Button from '@mui/material/Button'; function App() { return<Buttoncolor="primary" variant="contained">Hello World</Button>; }
OutPut: Import React <button disabled="disabled"> Disabled </button> 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.
