材质 UI：StartAdornment 不适用于标签

Question

如果“StartAdornment”添加了图标，“TextField”的标准变体将无法按预期工作。

如果我添加

StartAdornment

，标签将保持不变。我希望标签应作为占位符，并在焦点位于 TextField 时上升。

这是SandBox 链接：

export const Temp = () => {
  return (
    <div>
      <Grid sx={{ mt: 1.5 }}>
        <TextField
          variant="standard"
          required
          fullWidth
          label="Enter Mobile Number"
          autoFocus
          InputProps={{
            startAdornment: (
              <LoginRoundedIcon
                sx={{ p: 0.25, color: "#A9A9A9", ml: -0.5, mr: 1 }}
                position="start"
              >
                <Visibility></Visibility>
              </LoginRoundedIcon>
            ),
          }}
        />
      </Grid>
    </div>
  );
};

Answer 1

这是一个限制，我们可以通过如下解决方法来克服：

const [focused, setFocused] = useState(false);
const [currentValue, setCurrentValue] = useState("");


<TextField
      variant="standard"
      required
      fullWidth
      label="Enter Mobile Number"
      InputProps={{
        startAdornment: (
          <LoginRoundedIcon
            sx={{ p: 0.25, color: "#A9A9A9", ml: -0.5, mr: 1 }}
            position="start"
          >
            <Visibility></Visibility>
          </LoginRoundedIcon>
        )
      }}
      InputLabelProps={{
        shrink: focused || currentValue,
        style: { marginLeft: 30 }
      }}
      value={currentValue}
      onChange={(e) => setCurrentValue(e.target.value)}
      onFocus={() => setFocused(true)}
      onBlur={() => setFocused(false)}
/>

您可以查看 this stackblitz，了解此解决方法的实时工作示例。