如何将Next.js中MUI(V5)日期输入框占位符改为YYYY/MM/DD

要把MUI V5中type="date"的TextField默认占位符从mm/dd/yyyy改成YYYY/MM/DD，因为原生<input type="date">不支持直接设置placeholder属性，默认提示由浏览器控制，得通过CSS伪元素来实现，直接修改你的StyledTextField样式即可：

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

const StyledTextField = styled(TextField)`
    div {
        height: 32px;
    }

    /* 隐藏原生日期输入框的默认占位符文字 */
    input[type="date"]:not(:focus):not(:valid)::-webkit-datetime-edit {
        color: transparent;
    }

    /* 添加自定义的YYYY/MM/DD占位符 */
    input[type="date"]:not(:focus):not(:valid)::before {
        content: "YYYY/MM/DD";
        color: rgba(0, 0, 0, 0.6); /* 匹配MUI默认占位符的颜色 */
        position: absolute;
        pointer-events: none; /* 不干扰输入框的点击事件 */
    }
`

说明： #

• :not(:focus):not(:valid)确保只有当输入框未聚焦且无有效值时，才显示自定义占位符；当输入框获得焦点或已有日期值时，自动恢复原生显示逻辑。
• color: rgba(0, 0, 0, 0.6)是为了匹配MUI默认占位符的灰色调，你可以根据需求调整颜色。
• pointer-events: none避免伪元素遮挡输入框的点击区域，保证用户能正常点击输入框选择日期。

之后你的原有组件使用逻辑不需要改动，直接用修改后的StyledTextField即可。

内容的提问来源于stack exchange，提问作者SatelBill