react-day-picker - 如何删除焦点上的蓝色边框？

Question

当我单击日期选择器组件容器或日历中的单个单元格时，会添加一个蓝色边框。

我在 style.css 中找不到相关的 CSS，也没有看到 DevTools 中添加的任何可能添加蓝色边框的类。

我该如何摆脱这个？

Answer 1

当DayPicker-wrapper元素获得焦点时，会添加蓝色“边框”。除非您另外指定，否则它实际上outline是通常添加到任何焦点元素的 css 属性。

要从整个DayPicker元素中删除轮廓，请将以下内容添加到组件样式表.DayPicker-wrapper中的类中：DayPicker

.DayPicker-wrapper {
  outline: none;
}

您还可以通过添加{outline: none;}到.DayPicker-Day课程中将其从个别日子中删除。

Answer 2

Mark 的解决方案非常有效；仅供参考，如果您想删除所有大纲（蓝色边框）而不添加多个类，请尝试编写：

.DayPicker * {
  outline: none;
}