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

Question

我正在使用 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 的源代码，但我无法在我的组件中使用它，有什么建议吗？

Answer 1

下面是一个与 Autocomplete 中正在执行的操作大致相同的示例。该方法的要点是默认隐藏图标，然后将可见性翻转到visible悬停输入 ( &:hover $clearIndicatorDirty) 和输入聚焦时 ( & .Mui-focused)，但前提是当前输入中有文本 (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>
        )
      }}
    />
  );
}

相关文档：

• https://cssinjs.org/jss-plugin-nested?v=v10.0.0#use-rulename-to-reference-a-local-rule-within-the-same-style-sheet