How to style BottomNavigation in React Material UI?

Sometimes, we want to style BottomNavigation in React Material UI.

In this article, we’ll look at how to style BottomNavigation in React Material UI.

How to style BottomNavigation in React Material UI?

To style BottomNavigation in React Material UI, we can use the makeStyles function.

For instance, we write:

import React from "react";
import Paper from "@material-ui/core/Paper";
import BottomNavigation from "@material-ui/core/BottomNavigation";
import BottomNavigationAction from "@material-ui/core/BottomNavigationAction";
import RestoreIcon from "@material-ui/icons/Restore";
import FavoriteIcon from "@material-ui/icons/Favorite";
import LocationOnIcon from "@material-ui/icons/LocationOn";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(() => ({
  root: {
    color: "green",
    "&$selected": {
      color: "red"
    }
  },
  selected: {}
}));

export default function App() {
  const classes = useStyles();

  return (
    <div>
      <Paper>
        <BottomNavigation value={1} showLabels={true}>
          <BottomNavigationAction
            classes={classes}
            label="Home"
            icon={<RestoreIcon />}
          />

          <BottomNavigationAction
            classes={classes}
            label="Course"
            icon={<FavoriteIcon />}
          />

          <BottomNavigationAction
            classes={classes}
            label="Authors"
            icon={<LocationOnIcon />}
          />
        </BottomNavigation>
      </Paper>
    </div>
  );
}

We call makeStyles with a callback that sets the color of the content to green and the content of the selected button to red.

Then we call useStyles to return the classes which we apply to each BottomNavigationAction by setting the classes prop.

We also set the label prop to add text and the icon prop to add an icon.

The value prop sets the index of the BottomNavigationAction that is selected.

Therefore, the 2nd BottomNavigationAction is red and the rest are green.

Conclusion

To style BottomNavigation in React Material UI, we can use the makeStyles function.