Material UI 图标中的标签
Labels in Material UI Icons
我正在为我的 React 项目使用 material-ui 和 material-ui 图标。我是 React 新手。
有人可以教教我如何制作带标签的图标吗?ui我想将标签放在图标下方。例如,在“Home Icons”下写的文本“Home”。我正在尝试实现类似于 Microsoft Team 在侧边栏导航(网络版)中实现的东西
我看了 API,我发现有一个 prop 组件。但是,我尝试进行实验,每当我使用它时图标都会消失。
请访问这个 link 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>
);
}
我想要类似的:
请帮忙。谢谢。
我试过这种方法,成功了。需要将图标包装在 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
有时它根本不是 MUI,而是纯粹的 CSS。 MUI 已经提供了图标和标签,你只需要工作 CSS 一点,这个可能只需要使用 flex 属性自定义 ListItemIcon 样式(参见 listItemIcon class 规则):
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
我正在为我的 React 项目使用 material-ui 和 material-ui 图标。我是 React 新手。
有人可以教教我如何制作带标签的图标吗?ui我想将标签放在图标下方。例如,在“Home Icons”下写的文本“Home”。我正在尝试实现类似于 Microsoft Team 在侧边栏导航(网络版)中实现的东西
我看了 API,我发现有一个 prop 组件。但是,我尝试进行实验,每当我使用它时图标都会消失。
请访问这个 link 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>
);
}
我想要类似的:
请帮忙。谢谢。
我试过这种方法,成功了。需要将图标包装在 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
有时它根本不是 MUI,而是纯粹的 CSS。 MUI 已经提供了图标和标签,你只需要工作 CSS 一点,这个可能只需要使用 flex 属性自定义 ListItemIcon 样式(参见 listItemIcon class 规则):
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