Блог

Я просто пытаюсь изучить пользовательский интерфейс material специально для react makeStyles .

У меня есть следующий javascript код.

 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>
  );
}

 

Как вы можете видеть, дизайн очень прост. Я хочу создать панель навигации и заголовок, содержащий несколько значков с подсказками. Я хочу настроить значки, изменив цвет с помощью makeStyles . Также я хочу настроить уродливый материал по умолчанию. Я не знаю, где я ошибся. Пожалуйста, помогите мне 🙏🙏

Для справки я также прилагаю изображение вывода.

И еще одна вещь

Я использую django и реагирую вместе. Однако django заботится только о серверной части. Не знаю, имеет ли это какое-либо отношение к моей проблеме, но все же … 🙂

Проблема заключается в использовании classes вами свойства mui, где whiteIcon и blueBtn должно быть ключом к именам правил CSS, которые вы найдете здесь для IconButton и здесь: для кнопки. прокрутите вниз до части CSS.

так должно быть, например: classes={{root: classes.blueBtn}}

пожалуйста, отметьте как ответ, если вы удовлетворены

с уважением