Как лучше всего подойти к адаптивным кнопкам с иконками в Material-UI?

Question

У меня есть кнопка Material-UI с начальным значком, где я хотел бы скрыть текст кнопки на меньших экранах, но продолжать показывать значок.

Очевидный подход заключается в использовании ловушки useMediaQuery для определения размера браузера и визуализации другого компонента.

Однако я должен представить, что существует подход с использованием API CSS? Сначала blu sh, я не мог нацелить текстовый элемент, чтобы скрыть его, поскольку он заключен в тот же родительский элемент, что и значок. Поле label для кнопки CSS api содержит значок, поэтому добавление отображения «none» не работает, поскольку оно скрывает как текст, так и элемент значка родного элемента.

Есть ли стандартный подход для этого с Material-UI.

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