React js / Material UI

MUI, Material UI- For React js

November 29, 2021

mui for react js


Material Design with MUI v5.7.0 

* MUI Installation Documentation

Install

  npm install @mui/material @emotion/react @emotion/styled


Importing the Components
 
  import { Toolbar, Typography } from "@mui/material";


Install Icons 

  npm install @mui/icons-material
     

MUI Components in v5.0

  • Card Component
  • AppBar Component                                   
    • Toolbar                                               
COMPONENTS IN MUI


Container

The container centers your content horizontally. It's the most basic layout element.


  import {Container} from '@material-ui/core'; 


here you can see the code..
     <Container>
    The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog
    The quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dog
    The quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dog
  </Container>


maxWidth'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| false
| string		'lg'
Determine the max-width of the container. The container width grows with the size of the screen. Set to false to disable maxWidth.

Typography

Use typography to present your design and content as clearly and efficiently as possible.

 
  import Typography from '@material-ui/core/Typography';   OR   import {Container,Paper, Typography} from '@material-ui/core';  


variant'body1'
| 'body2'
| 'button'
| 'caption'
| 'h1'
| 'h2'
| 'h3'
| 'h4'
| 'h5'
| 'h6'
| 'inherit'
| 'overline'
| 'subtitle1'
| 'subtitle2'
| string

  <Typography variant="body" color="secondary" align="center">
    the quick brown fox jumps over the lazy dog the quick brown fox jumps over     the lazy dog the quick brown fox jumps over the lazy dog the quick brown     fox jumps over the lazy dog
  </Typography>   
                   

Button

The Button comes with three variants: text (default), contained, and outlined.


    import Button from '@mui/material/Button';

size'small'
| 'medium'
| 'large'
| string		'medium'
The size of the component. small is equivalent to the
dense button styling.
variant'contained'
| 'outlined'
| 'text'
| string		'text'
The variant to use.
color'inherit'
| 'primary'
| 'secondary'
| 'success'
| 'error'
| 'info'
| 'warning'
| string		'primary'
The color of the component. It supports those
theme colors that make sense for this component.
       
   <Container>
   <Paper elevation={5} variant="outline" p={5}>
     the quick brown fox jumps over the lazy dog the quick brown fox jumps over the      lazy dog the quick brown fox jumps over the lazy dog the quick brown fox      jumps over the lazy dog    
   </Paper>
   <Button mt={5} color="primary" variant="contained">
       read more
   </Button>
  </Container>


Box

The Box component serves as a wrapper component for most of the CSS utility needs

  import { Box} from '@material-ui/core';


     
      <Box p={5}>
        <Typography variant="h4">
      the quick brown fox jumps over the  lazy dog the quick brown fox jumps over the  lazy dog
        the quick brown fox jumps over the  lazy dog the quick brown fox jumps over the  lazy dog
        the quick brown fox jumps over the  lazy dog the quick brown fox jumps over the  lazy dog
        </Typography>
      </Box>
     


Paper

In Material Design, the physical properties of paper are translated to the screen.
The background of an application resembles the flat, opaque texture of a sheet of paper, and an application's behavior mimics paper's ability to be re-sized, shuffled, and bound together in multiple sheets.


import {Container, Paper} from '@material-ui/core';


variant'elevation'
| 'outlined'
| string		'elevation'
The variant to use.
elevationinteger1
Shadow depth, corresponds to dp in the spec. It accepts values between 0 and 24 inclusive.
       
 <Container>
   <Paper elevation={5} variant="outline" p={5}>
     the quick brown fox jumps over the lazy dog the quick brown fox jumps over the      lazy dog the quick brown fox jumps over the lazy dog the quick brown fox      jumps over the lazy dog    
   </Paper>
  </Container>

Table

Tables display sets of data. They can be fully customized.In Material Design there is different kinds of data tables are there, they are 

import { Table,TableCell, TableRow,TableHead,TableBody } from '@material-ui/core';

EX ::


    <Table>
      <TableHead>
        <TableRow>
          <TableCell>First Column</TableCell>
          <TableCell>First Column</TableCell>
          <TableCell>First Column</TableCell>
          <TableCell>First Column</TableCell>
          <TableCell>First Column</TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        <TableRow>
            <TableCell>First Column</TableCell>
            <TableCell>First Column</TableCell>
            <TableCell>First Column</TableCell>
            <TableCell>First Column</TableCell>
            <TableCell>First Column</TableCell>
          </TableRow>
      </TableBody>
    </Table>