[React]BottomNavigation(material ui)

下部にナビゲーションバーをつける

import React, { useState } from "react";
import { BottomNavigation, BottomNavigationAction, makeStyles } from "@material-ui/core";
import RestoreIcon from '@material-ui/icons/Restore';
import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder';
import LocationOnIcon from '@material-ui/icons/LocationOn';
// import { useApp } from '../context'

// スタイルの記述をする
const useStyles = makeStyles(theme => ({  
	bottomContainer: {
       // position: 'absolute',
       // bottom: '0px',
       // margin: '0',
	}
 }));
// 
export const Footer = () => {	
   const [navValue, setNavValue] = useState(0);
	const classes = useStyles();
	return (
		<BottomNavigation
           value={navValue}
           onChange={(event, newValue) => {
               console.log('newValue : ', newValue);
               setNavValue(newValue);
           }}
           showLabels
           className={classes.bottomContainer}
           >
           <BottomNavigationAction label="Recents" icon={<RestoreIcon />} />
           <BottomNavigationAction label="Favorites" icon={<FavoriteBorderIcon />} />
           <BottomNavigationAction label="Nearby" icon={<LocationOnIcon />} />
       </BottomNavigation>
		);
}