Material-UI：使 IconButton 仅在悬停时可见？答案

【问题标题】：Material-UI: Make IconButton only visible on hover?Material-UI：使 IconButton 仅在悬停时可见？
【发布时间】：2020-03-29 18:32:05
【问题描述】：

我正在使用 MUI InputBase 制作一个自定义输入组件，并且我想要一个“清除”按钮 endAdornment，仅当您将鼠标悬停在输入上时才会出现：

    <InputBase
      inputComponent={getCustomInputComponent()}
      onClick={onClick}
      ...
      endAdornment={
        <IconButton
          size='small'
          onClick={handleClear}>
          <IconClear fontSize='small'/>
        </IconButton>
      }
    />

类似于他们新的“自动完成”组件的工作方式：https://material-ui.com/components/autocomplete/

我查看了 Autocomplete 的源代码，但我无法让它在我的组件中运行，有什么建议吗？

【问题讨论】：

标签： reactjs material-ui jss

【解决方案1】：

下面是一个大致相当于自动完成功能的示例。该方法的要点是默认隐藏图标，然后在输入悬停（&:hover $clearIndicatorDirty）和输入聚焦时（& .Mui-focused）将可见性翻转为visible，但前提是当前存在输入中的文本（clearIndicatorDirty 仅在 value.length > 0 时应用）。

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
import IconButton from "@material-ui/core/IconButton";
import ClearIcon from "@material-ui/icons/Clear";
import clsx from "clsx";

const useStyles = makeStyles(theme => ({
  root: {
    "&:hover $clearIndicatorDirty, & .Mui-focused $clearIndicatorDirty": {
      visibility: "visible"
    }
  },
  clearIndicatorDirty: {},
  clearIndicator: {
    visibility: "hidden"
  }
}));

export default function CustomizedInputBase() {
  const classes = useStyles();
  const [value, setValue] = React.useState("");
  return (
    <TextField
      variant="outlined"
      className={classes.root}
      value={value}
      onChange={e => setValue(e.target.value)}
      InputProps={{
        endAdornment: (
          <IconButton
            className={clsx(classes.clearIndicator, {
              [classes.clearIndicatorDirty]: value.length > 0
            })}
            size="small"
            onClick={() => {
              setValue("");
            }}
          >
            <ClearIcon fontSize="small" />
          </IconButton>
        )
      }}
    />
  );
}