首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >带标签的IconButton

带标签的IconButton
EN

Stack Overflow用户
提问于 2019-09-20 19:35:48
回答 1查看 8.5K关注 0票数 9

IconButton中是否有什么东西可以用来定义图标下面的标签?

也许类似于BottomNavigationAction,但不一定要在BottomNavigation中。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-09-20 20:53:56

您可以将您的标签添加为IconButton的直接子级(图标本身的同级),并覆盖图标按钮标签样式,使其具有flexDirection:列。

代码语言:javascript
复制
import React from 'react';
import {IconButton} from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import SaveIcon from '@material-ui/icons/Save';

const useStyles = makeStyles(theme => ({
  iconButtonLabel: {
    display: 'flex',
    flexDirection: 'column',
  },
}));

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

  return (
      <IconButton classes={{label: classes.iconButtonLabel}}>
        <SaveIcon/>
        <div>
          hello
        </div>
      </IconButton>
  );
}

票数 17
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/58034255

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档