使 Material-UI InputAdornment 图标仅在选择时可见？

Question

是否可以使此沙箱（https://codesandbox.io/s/material-demo-w385h）中的 Material-UI 图标装饰仅在用户选择文本字段时可见？

代码：

<TextField
  className={classes.margin}
  id="input-with-icon-textfield"
  label="TextField"
  InputProps={{
    startAdornment: (
      <InputAdornment position="start">
        <AccountCircle />
      </InputAdornment>
    )
  }}
/>

我希望有一个使用 Material-UI 道具的干净解决方案。

Answer 1

我发布此内容后立即意识到解决方案：

https://codesandbox.io/s/material-demo-w385h

设置一个IconAdornment变量来包含我们的InputPropswhen isSelected === true。

OnFocus：setIsSelected(true)和OnBlur：setIsSelected(false)。

  const [isSelected, setIsSelected] = useState(false);

  const iconAdornment = isSelected
    ? {
        startAdornment: (
          <InputAdornment position="start">
            <AccountCircle />
          </InputAdornment>
        )
      }
    : {};

  return (
    <TextField
      className={classes.margin}
      id="input-with-icon-textfield"
      label="TextField"
      InputProps={iconAdornment}
      onFocus={e => setIsSelected(true)}
      onBlur={e => setIsSelected(false)}
    />
  );