Javascript 如何让 MUI TextField 组件中的占位符滑到框的顶部而不是框的边框内

我正在try 创建以下文本字段，使其在MUI中如下所示:

然而，我有以下几点:

当我在文本字段内部单击时，占位符将滑动到顶部并放置在边框内，但我希望使其看起来像占位符位于框本身左上角的第一个图像.

我正在使用MUI的TextField组件:https://mui.com/material-ui/react-text-field/

有谁能解释一下这件事吗？

以下是我的代码:

CustomField.jsx

import React from "react"
import { styled } from "@mui/material/styles"
import TextField from "@mui/material/TextField"

const StyledTextField = styled(TextField)(({ width, marginTop }) => ({
  width: width || "343px",
  marginTop: marginTop || "25px",
  "& .MuiOutlinedInput-root": {
    "&:focus-within fieldset": {
      borderColor: "black",
      color: "black",
    },
  },
  "&:focus-within .MuiFormLabel-root": {
    color: "black",
  },
}))

const CustomTextField = ({ label, variant, helperText, value, onChange, disabled, width, marginTop }) => (
  <StyledTextField
    label={label}
    variant={variant}
    helperText={helperText}
    value={value}
    onChange={onChange}
    disabled={disabled}
    width={width}
    marginTop={marginTop}
  />
)

export default CustomTextField

App.jsx

const App = () => {
 const handleEmailChange = () => {};
 const email = "user@email.com;

 return (
   <CustomTextField
        label="Phone number or email"
        variant="outlined"
        helperText="Some helper text."
        onChange={handleEmailChange}
        value={email}
      />
 )
}