Кнопка со значком

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