带标签的IconButton

Question

我可以在IconButton中使用某些东西来在图标下方定义标签吗？

也许与BottomNavigationAction类似，但不必放在BottomNavigation内。

Answer 1

您可以将标签添加为IconButton的直接子项（Icon本身的兄弟），并覆盖IconButton标签样式以使其具有 flexDirection：column

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>
  );
}