javascript - make Styles in material ui is not working

Question

I'm just trying to learn material ui for react especially makeStyles.

I've the following javascript code.

---

import React from "react";
import MenuIcon from "@material-ui/icons/Menu";
import EventNoteIcon from "@material-ui/icons/EventNote";
import ScheduleIcon from "@material-ui/icons/Schedule";
import NoteIcon from "@material-ui/icons/Note";
import AttachMoneyIcon from "@material-ui/icons/AttachMoney";
import NotificationsIcon from "@material-ui/icons/Notifications";
import Brightness4Icon from "@material-ui/icons/Brightness4";
import AccountCircleIcon from "@material-ui/icons/AccountCircle";
import { Button, IconButton, makeStyles, Tooltip } from "@material-ui/core";

export default function Dashboard() {
  const useStyles = makeStyles({
    whiteIcon: {
      color: "white",
    },
    blueBtn:{
        color: "#717171",
        border: "2px solid #5B97CF",
        borderRadius: 9,
        backgroundColor: 'white'
    }
  });

  const classes = useStyles();

  return (
    <div className="wrapper">
      <div className="navbar">
        <div className="icons">
          <Tooltip title="Menu" placement="right">
            <IconButton classes={classes.whiteIcon}>
              <MenuIcon style={{ color: "white" }} />
            </IconButton>
          </Tooltip>
          <Tooltip title="My Appointments" placement="right">
            <IconButton>
              <EventNoteIcon style={{ color: "white" }} />
            </IconButton>
          </Tooltip>
          <Tooltip title="My Daily schdule" placement="right">
            <IconButton>
              <ScheduleIcon style={{ color: "white" }} />
            </IconButton>
          </Tooltip>
          <Tooltip title="My Projects" placement="right">
            <IconButton>
              <NoteIcon style={{ color: "white" }} />
            </IconButton>
          </Tooltip>
          <Tooltip title="Expense Manager" placement="right">
            <IconButton>
              <AttachMoneyIcon style={{ color: "white" }} />
            </IconButton>
          </Tooltip>
        </div>
      </div>

      <div className="dash-container">
        <div className="header">
          <Tooltip title="Notifications">
            <IconButton>
              <NotificationsIcon />
            </IconButton>
          </Tooltip>
          <Tooltip title="Toogle Light/Dark Mode">
            <IconButton>
              <Brightness4Icon />
            </IconButton>
          </Tooltip>
          <Tooltip title="Your Account">
              <Button startIcon={<AccountCircleIcon />} classes={classes.blueBtn} >Your Account</Button>
          </Tooltip>
        </div>
        <div className="dash-content">
          <div className="dash-recent-projects"></div>
          <div className="other"></div>
        </div>
      </div>
    </div>
  );
}

As you can see the design is very simple. I want to make a navbar and a header that holds some icons with their tool tips. I want to customize the icons by changing the colour using makeStyles. Also I want to customize the default ugly material as well. I don't know where I went wrong. Pls help me ????

For reference, I'm also attaching the image of output.

And one more thing

I'm using django and react together. However django takes care of the backend only. No idea whether it has anything to do with my problem but still . . . :)

Answer 1

OK I found the answer myself after reading the docs a bit. The reason for the code not working was I didn't use makeStyles properly

---

 <Tooltip title="Your Account">
                              <Button startIcon={<AccountCircleIcon />} classes={{root: classes.blueBtn} >Your Account</Button>
// Here I guess that it is mandatory to mention which part I am customizing. 
// In my case I have to specify that I want to override the root class of the element
                          </Tooltip>

This code worked for me.

Thank you