reactjs - 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/

我看过自动完成的源代码，但是我无法在我的组件中使用它，有什么建议吗？

Answer 1

下面是一个与“自动完成”中的操作大致等效的示例。该方法的要点是默认情况下将图标隐藏，然后在输入悬停时(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