Introduction
Material UI or MUI is a library of UI components that implements Google's Material Design.
Tooltips display informative text when users hover over, focus on, or tap an element.
When activated, Buttons allow users to take actions, and make choices, with a single tap.
Preconditions
- Javascript
- Basic knowledge of Next js
- Node.js
- V.S. Code,Visual Studio
We cover the below things,
- Create Next application
- Installation of Material UI Components of Button and Dropdown
- How to Apply Material UI components of Button and Dropdown from in Next js
Step 1
npx create-next-app materlapp
cd materlapp
npm i
npm run dev
Step 2
Run the below command for installing Material UI
npm install @mui/material @emotion/react @emotion/styled
npm install @mui/material @mui/styled-engine-sc styled-components
npm install @mui/icons-material
npm i @mui/lab
Create the files according to the below image,
Step 3
Add the below code in the MaterialBtnDropd.js
import * as React from 'react';
import Button from '@mui/material/Button';
import DeleteIcon from '@mui/icons-material/Delete';
import SendIcon from '@mui/icons-material/Send';
import Stack from '@mui/material/Stack';
import Box from '@mui/material/Box';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormHelperText from '@mui/material/FormHelperText';
import FormControl from '@mui/material/FormControl';
import Select, { SelectChangeEvent } from '@mui/material/Select';
const MaterialBtnDropd = () => {
const [age, setAge] = React.useState('');
const handleChange = (event) => {
setAge(event.target.value);
};
return (
<div>
<Stack direction="row" spacing={2}>
<Button variant="outlined" startIcon={<DeleteIcon />}>
Delete
</Button>
<Button variant="contained" endIcon={<SendIcon />}>
Send
</Button>
</Stack>
<Box sx={{ '& button': { m: 1 } }}>
<div>
<Button size="small">Small</Button>
<Button size="medium">Medium</Button>
<Button size="large">Large</Button>
</div>
<div>
<Button variant="outlined" size="small">
Small
</Button>
<Button variant="outlined" size="medium">
Medium
</Button>
<Button variant="outlined" size="large">
Large
</Button>
</div>
<div>
<Button variant="contained" size="small">
Small
</Button>
<Button variant="contained" size="medium">
Medium
</Button>
<Button variant="contained" size="large">
Large
</Button>
</div>
</Box>
<br></br>
<br></br>
<br></br>
<br></br>
<FormControl sx={{ m: 1, minWidth: 120 }} disabled>
<InputLabel id="demo-simple-select-disabled-label">Age</InputLabel>
<Select
labelId="demo-simple-select-disabled-label"
id="demo-simple-select-disabled"
value={age}
label="Age"
onChange={handleChange}>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
<FormHelperText>Disabled</FormHelperText>
</FormControl>
<FormControl sx={{ m: 1, minWidth: 120 }} error>
<InputLabel id="demo-simple-select-error-label">Age</InputLabel>
<Select
labelId="demo-simple-select-error-label"
id="demo-simple-select-error"
value={age}
label="Age"
onChange={handleChange}
renderValue={(value) => `⚠️ - ${value}`}>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
<FormHelperText>Error</FormHelperText>
</FormControl>
<FormControl sx={{ m: 1, minWidth: 120 }}>
<InputLabel id="demo-simple-select-readonly-label">Age</InputLabel>
<Select
labelId="demo-simple-select-readonly-label"
id="demo-simple-select-readonly"
value={age}
label="Age"
onChange={handleChange}
inputProps={{ readOnly: true }}>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
<FormHelperText>Read only</FormHelperText>
</FormControl>
<FormControl required sx={{ m: 1, minWidth: 120 }}>
<InputLabel id="demo-simple-select-required-label">Age</InputLabel>
<Select
labelId="demo-simple-select-required-label"
id="demo-simple-select-required"
value={age}
label="Age *"
onChange={handleChange}>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
<FormHelperText>Required</FormHelperText>
</FormControl>
</div>
)
}
export default MaterialBtnDropd
Join the conversation! Your thoughts help the community grow.