如何解决材质UI图标中的标签
我在我的React项目中使用了material-ui和material-ui图标。我是反应新手。
有人可以指导我如何制作带有标签的图标吗?我想将标签放在图标的正下方。例如,在“主页图标”下编写的文本“主页”。我正在尝试实现类似于Microsoft团队在边栏导航(网络版本)中实现的功能
我阅读了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>
);
}
我想与此类似:
请帮助。谢谢。
解决方法
有时根本不是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
,我尝试过这种方法,并且有效。需要将图标包装在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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。