带标签的图标按钮

Question

有什么我可以用 in/withIconButton来定义图标下方的标签吗？

也许类似于BottomNavigationAction但不必在BottomNavigation.

Answer 1

您可以将标签添加为 IconButton（图标本身的兄弟）的直接子项，并覆盖 IconButton-label 样式以具有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>
  );
}