如何禁用MUI X日期选择器焦点高亮且保留TextField焦点高亮？

问题原因 #

MUI X DatePicker的外层容器在焦点状态下会默认添加轮廓样式，同时内部TextField也自带焦点高亮样式，两者叠加后出现双重蓝色轮廓，导致标签视觉上像被划掉。

解决方案 #

通过sx属性直接覆盖DatePicker容器的焦点状态样式，禁用其轮廓和阴影，只保留TextField的焦点高亮效果：

修改后的完整代码 #

<LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={localeMap.en}>
    <Box m={2}>
        <DatePicker
            showToolbar={false}
            views={["year", "month", "day"]}
            openTo="day"
            label="Day"
            maxDate={new Date()}
            value={v}
            onChange={setV}
            // 添加sx属性覆盖焦点样式
            sx={{
                '&:focus-within': {
                    outline: 'none',
                    boxShadow: 'none',
                },
            }}
            renderInput={(params) => (
                <TextField
                    {...params}
                    helperText={null}
                    onKeyDown={onKeyDown}
                />
            )}
        />
    </Box>
</LocalizationProvider>
<button type="submit" onClick={fetchReports}
    className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font 
    medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 
    focus:outline-none dark:focus:ring-blue-800 border-black">
    Get Report
</button>

补充说明 #

• :focus-within选择器会在DatePicker容器内部元素（如TextField）获得焦点时触发，这里直接禁用该状态下的轮廓和阴影，避免和TextField的焦点样式冲突。
• 若需全局统一调整，也可以通过MUI的createTheme修改DatePicker的默认焦点样式，但上述方法更轻量，适合单个组件的快速修复。

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