MUI-X Datepicker本地与生产环境表现不一致问题求助

问题现象 #

• 辅助文本（helperText）完全不显示
• 自定义样式失效：选中值后标签未变色加粗、输入框边框未高亮、Done图标未渲染
• 占位符格式差异：本地显示dd/mm/yyyy，生产环境显示DD/MM/YYYY
• 输入行为不同：本地支持自由输入日期，生产环境强制分字段填写（类似掩码输入）

组件代码 #

import { Done } from '@mui/icons-material';
import { TextField } from '@mui/material';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import dayjs from 'dayjs';
import 'dayjs/locale/it';
import { useField } from 'formik';

export default function CustomDatePickerField(props) {
    const [field, meta, helpers] = useField(props);
    const { label, placeholder, required, errorMaxDate } = props;

    const { setValue } = helpers;

    return (
        <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="it">
            <DatePicker
                {...props}
                {...field}
                onChange={(newValue) => {
                    setValue(dayjs(newValue), false);
                }}
                renderInput={(params) => {
                    return (
                        <TextField
                            {...params}
                            label={label}
                            required={required}
                            InputLabelProps={{
                                sx: {
                                    color: field.value && 'primary.main',
                                    fontWeight: field.value && 600,
                                },
                            }}
                            InputProps={{
                                ...params.InputProps,
                                sx: {
                                    '& fieldset': {
                                        borderColor: field.value && 'primary.main',
                                        borderWidth: field.value && 2,
                                    },
                                },
                                endAdornment: (
                                    <>
                                        {field.value && <Done color="success" />}
                                        {params.InputProps.endAdornment}
                                    </>
                                ),
                            }}
                            helperText={
                                meta.touched && meta.error
                                    ? meta.error === 'maxDate'
                                        ? errorMaxDate
                                        : meta.error
                                    : params.error
                                    ? errorMaxDate
                                    : ''
                            }
                        />
                    );
                }}
            />
        </LocalizationProvider>
    );
}

本地环境渲染HTML #

<div class="MuiFormControl-root MuiTextField-root css-1u3bzj6-MuiFormControl-root-MuiTextField-root"><label
        class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined css-1t5hpzq-MuiFormLabel-root-MuiInputLabel-root"
        data-shrink="true" for=":r29:" id=":r29:-label">Data di nascita</label>
    <div
        class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-adornedEnd css-u5s1z3-MuiInputBase-root-MuiOutlinedInput-root">
        <input aria-invalid="false" id=":r29:" placeholder="dd/mm/yyyy" type="tel"
            class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd css-1nyojts-MuiInputBase-input-MuiOutlinedInput-input"
            value="12/05/1970"><svg
            class="MuiSvgIcon-root MuiSvgIcon-colorSuccess MuiSvgIcon-fontSizeMedium css-h0uysn-MuiSvgIcon-root"
            focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="DoneIcon">
            <path d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"></path>
        </svg>
        <div
            class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeMedium css-1laqsz7-MuiInputAdornment-root">
            <button
                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-1yq5fb3-MuiButtonBase-root-MuiIconButton-root"
                tabindex="0" type="button" aria-label="Choose date, selected date is 12 mag 1970"><svg
                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root" focusable="false"
                    aria-hidden="true" viewBox="0 0 24 24" data-testid="CalendarIcon">
                    <path
                        d="M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z">
                    </path>
                </svg><span class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"></span></button></div>
        <fieldset aria-hidden="true"
            class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline">
            <legend class="css-14lo706"><span>Data di nascita</span></legend>
        </fieldset>
    </div>
</div>

生产环境渲染HTML #

<div class="MuiFormControl-root MuiTextField-root css-i44wyl"><label
        class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined css-1ww17fv"
        data-shrink="true" for=":r14:" id=":r14:-label">Data di nascita</label>
    <div
        class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-adornedEnd css-16tb7cc">
        <input aria-invalid="false" autocomplete="off" id=":r14:" placeholder="DD/MM/YYYY" type="text" inputmode="text"
            class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd css-6bpnaz"
            value="03/02/1978">
        <div
            class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeMedium css-1nvf7g0">
            <button
                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-slyssw"
                tabindex="0" type="button" aria-label="Choose date, selected date is 3 feb 1978"><svg
                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-vubbuv" focusable="false" aria-hidden="true"
                    viewBox="0 0 24 24" data-testid="CalendarIcon">
                    <path
                        d="M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z">
                    </path>
                </svg><span class="MuiTouchRipple-root css-w0pj6f"></span></button></div>
        <fieldset aria-hidden="true" class="MuiOutlinedInput-notchedOutline css-igs3ac">
            <legend class="css-14lo706"><span>Data di nascita</span></legend>
        </fieldset>
    </div>
</div>

差异截图 #

• 本地环境：
• 生产环境：

排查建议 #

1. 核对依赖版本：确认本地与生产环境的@mui/x-date-pickers、dayjs、@mui/material版本完全一致，版本差异是此类问题的常见原因
2. 检查本地化加载：验证生产构建包中是否包含dayjs/locale/it模块，tree-shaking可能误删该文件导致本地化失效
3. 分析输入类型差异：本地input为type="tel"，生产为type="text"，这直接影响输入行为，检查是否有构建配置或版本差异修改了DatePicker的默认输入类型
4. 排查样式丢失原因：检查生产环境的CSS注入顺序，确认自定义sx样式未被全局样式覆盖；另外验证MUI的CSS-in-JS在生产环境是否正常编译
5. 检查构建优化配置：禁用生产构建中的部分压缩/优化规则，排查是否是代码混淆或tree-shaking导致组件逻辑丢失

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