Question

我只是想学习用于反应的材料 ui，尤其是 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 只负责后端。不知道它是否与我的问题有关，但仍然。 . . :)

Answer 1

好的，我在阅读了一些文档后自己找到了答案。代码不工作的原因是我没有正确使用 makeStyles

 <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>

此代码对我有用。

谢谢

使材质 ui 中的样式不起作用

1 个答案: