在material-ui中使用图标响应按钮的最佳方法是什么？答案

【问题标题】：What is best approach to responsive buttons with icons in material-ui?在material-ui中使用图标响应按钮的最佳方法是什么？
【发布时间】：2020-04-21 20:15:15
【问题描述】：

我有一个带有 startIcon 的 material-ui 按钮，我想在较小的屏幕上隐藏按钮文本但继续显示图标。

显而易见的方法是使用 useMediaQuery 挂钩来检测浏览器大小并呈现不同的组件。

但是，我不得不想象有一种使用 CSS api 的方法？乍一看，我无法定位文本元素来隐藏它，因为它被包裹在与图标相同的父元素中。 Button CSS api 的 label 字段包含图标，因此添加 display: 'none' 不起作用，因为它隐藏了文本和同级图标元素。

material-ui 有没有标准的方法。

【问题讨论】：

标签： css reactjs material-ui

【解决方案1】：

以下是执行此操作的一种方法的示例。这在文本周围使用 <span> 和一个单独的类 (classes.buttonText) 来控制隐藏它。 CSS 的其余部分用于使图标居中 (margin: 0) 并减小按钮的大小（最小宽度和填充）。

import React from "react";
import Button from "@material-ui/core/Button";
import { makeStyles } from "@material-ui/core/styles";
import DeleteIcon from "@material-ui/icons/Delete";

const useStyles = makeStyles(theme => ({
  button: {
    margin: theme.spacing(1),
    [theme.breakpoints.down("sm")]: {
      minWidth: 32,
      paddingLeft: 8,
      paddingRight: 8,
      "& .MuiButton-startIcon": {
        margin: 0
      }
    }
  },
  buttonText: {
    [theme.breakpoints.down("sm")]: {
      display: "none"
    }
  }
}));

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

  return (
    <div>
      <Button
        variant="contained"
        color="secondary"
        className={classes.button}
        startIcon={<DeleteIcon />}
      >
        <span className={classes.buttonText}>Delete</span>
      </Button>
    </div>
  );
}

【讨论】：

如此简单。我应该想到的。谢谢。