How To Setup Button and Dropdown In Next JS With Material UI/MUI Component

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

Step 4

Add the below code in the index.js

import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
import MaterialBtnDropd from './MaterialBtnDropd'

export default function Home() {
  return (
	<div className={styles.container}>
	  <Head>
		<title>Create Next App</title>
		<h1 className={styles.title}>
		  Welcome to <a href="https://nextjs.org">Next.js!</a>
		</h1>
	  </Head>
	  <main className={styles.main}>
		<MaterialBtnDropd />
	  </main>
	  <footer className={styles.footer}>
		<a href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
		  target="_blank"
		  rel="noopener noreferrer">
		  Powered by{' '}
		  <span className={styles.logo}>
			<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
		  </span>
		</a>
	  </footer>
	</div>
  )
}

Step 5

Add the following code in package.json,

{
  "name": "materlapp",
  "version": "0.1.0",
  "private": true,
  "scripts": {
	"dev": "next dev",
	"build": "next build",
	"start": "next start",
	"lint": "next lint"
  },
  "dependencies": {
	"@emotion/react": "^11.10.4",
	"@emotion/styled": "^11.10.4",
	"@mui/icons-material": "^5.10.6",
	"@mui/lab": "^5.0.0-alpha.100",
	"@mui/material": "^5.10.6",
	"@mui/styled-engine-sc": "^5.10.6",
	"next": "12.3.1",
	"react": "18.2.0",
	"react-dom": "18.2.0",
	"styled-components": "^5.3.5"
  },
  "devDependencies": {
	"eslint": "8.23.1",
	"eslint-config-next": "12.3.1"
  }
}

Step 6

Run the following commands

npm i
npm run dev

Summary

In this article, we learned how to create NextJS project, set Material UI/MUI, and how to add buttons & dropdowns MUI component.