如何禁用 MUI DatePicker 焦点高亮但保持 TextField 焦点高亮？答案

【问题标题】：How to Disable MUI DatePicker Focus Highlight But Keep TextField Focus Highlight?如何禁用 MUI DatePicker 焦点高亮但保持 TextField 焦点高亮？
【发布时间】：2023-01-13 12:04:27
【问题描述】：

我正在使用 MUI DatePicker 在 react.js 中构建日期选择器。该代码几乎与他们的documentation 使用的完全相同。

但是，当组件呈现时，我得到两层蓝色焦点轮廓。一张来自DatePicker，一张来自TextField。这会导致 DatePicker 标签看起来像是被划掉了。我已经努力让这个工作好几天了。

我试过玩：

输入道具
风格标签
类名

但没有运气。我对前端比较陌生，非常感谢任何帮助。

这就是我得到的：

这就是我想要实现的目标：（我将 TextField 设置为 focused 只是为了显示我需要在这里实现的目标）：

这是我对 DatePicker 的实现：

<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}
            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>

【问题讨论】：

标签： javascript reactjs material-ui

【解决方案1】：

最后通过从 tailwind base 覆盖 --tw-ring-shadow 使其工作。 @ed-lucas 给here 的答案也对我有用。

在 index.css 中添加了以下内容以覆盖默认行为。

input {
    --tw-ring-shadow: 0 0 #000 !important;
}

【讨论】：