Material UI 图标中的标签答案

【问题标题】：Labels in Material UI IconsMaterial UI 图标中的标签
【发布时间】：2021-01-16 15:11:10
【问题描述】：

我正在为我的 react 项目使用 material-ui 和 material-ui 图标。我是新手。

有人可以指导我如何制作带标签的图标吗？我想将标签放在图标下方。例如，写在“主页图标”下的文本“主页”。我正在尝试实现类似于 Microsoft Team 在侧边栏导航（网络版）中实现的功能

我阅读了 API，发现有一个 prop 组件。但是，我尝试进行实验，但每当我使用它时，图标就会消失。

请访问此链接https://codesandbox.io/s/material-demo-forked-nohsm?file=/demo.js 我得到了这个结果：

这是我的代码

import React from "react";
import AppBar from "@material-ui/core/AppBar";
import Drawer from "@material-ui/core/Drawer";
import { makeStyles, useTheme } from "@material-ui/core/styles";
import NotificationsIcon from "@material-ui/icons/Notifications";
import { ListItem, Toolbar } from "@material-ui/core";
import List from "@material-ui/core/List";
import ListItemIcon from "@material-ui/core/ListItemIcon";

const drawerWidth = 72;

const useStyles = makeStyles((theme) => ({
  root: {
    display: "flex"
  },
  drawer: {
    width: drawerWidth,
    alignItems: "center",
    justifyContent: "center",
    paddingTop: theme.spacing(5)
  },
  drawerPaper: {
    width: drawerWidth
  }
}));

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

  return (
    <div className={classes.root}>
      <AppBar position="fixed" color="primary">
        <Toolbar></Toolbar>
      </AppBar>
      <Drawer
        classes={{
          paper: classes.drawerPaper
        }}
        variant="permanent"
        className={classes.drawer}
      >
        {/* <NotificationsIcon size="large" /> */}

        <List>
          <ListItem>
            <ListItemIcon>
              <NotificationsIcon color="primary" fontSize="large" />
              Activity
            </ListItemIcon>
          </ListItem>
        </List>
      </Drawer>
    </div>
  );
}

我想和这个类似：

请帮忙。谢谢。

【问题讨论】：

请发布您用于渲染图标的代码
请检查一次，我做了

标签： reactjs material-ui icons google-material-icons

【解决方案1】：

有时它根本不是 MUI，而是纯 CSS。 MUI 已经提供了图标和标签，您只需要稍微处理一下 CSS，这可能只需要使用 flex 属性自定义 ListItemIcon 样式（请参阅 listItemIcon 类规则）：

const useStyles = makeStyles((theme) => ({
  root: {
    display: "flex"
  },
  listItemIcon: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'column'
  },
  drawer: {
    width: drawerWidth,
    alignItems: "center",
    justifyContent: "center",
    paddingTop: theme.spacing(5)
  },
  drawerPaper: {
    width: drawerWidth
  }
}));

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

  return (
    <div className={classes.root}>
      <AppBar position="fixed" color="primary">
        <Toolbar></Toolbar>
      </AppBar>
      <Drawer
        classes={{
          paper: classes.drawerPaper
        }}
        variant="permanent"
        className={classes.drawer}
      >
        {/* <NotificationsIcon size="large" /> */}

        <List>
          <ListItem>
            <ListItemIcon className={classes.listItemIcon}>
              <NotificationsIcon color="primary" fontSize="large" />
              Activity
            </ListItemIcon>
          </ListItem>
        </List>
      </Drawer>
    </div>
  );
}

当 MUI 不为其提供默认样式时，您始终可以使用flex-box

【讨论】：

【解决方案2】：

我试过这种方法，它奏效了。需要将图标包装在一个 div 中，它会起作用。

<List>
          <ListItem style={{ textAlign: "center" }}>
            <div>
              <NotificationsIcon color="primary" fontSize="large" />
              Activity
            </div>
          </ListItem>
          <ListItem style={{ textAlign: "center" }}>
            <div>
              <NotificationsIcon color="primary" fontSize="large" />
              Activity
            </div>
          </ListItem>
        </List>

https://codesandbox.io/s/material-demo-forked-b73ds?file=/demo.js

【讨论】：