React Rsuite DatePicker默认蓝色样式移除及自定义样式问题

问题根源 #

Rsuite的DatePicker组件默认蓝色样式不仅存在于.rs-picker-input-group层级，内部嵌套的触发按钮（.rs-picker-toggle）和输入框（.rs-input）也自带聚焦状态的蓝色样式，仅修改外层输入组无法完全清除。

完整解决方案代码 #

/* 基础样式：重置输入组边框、圆角 */
.rs-picker-input-group {
  border: 1px solid #ccc;
  border-radius: 1px;
  display: flex;
  align-items: center;
  /* 调整输入组整体内边距（按需修改数值） */
  padding: 4px 8px;
}

/* 聚焦时强制显示橙色边框，清除默认蓝色高亮 */
.rs-picker-input-group:focus-within {
  outline: none !important;
  border-color: #eb6c0b !important;
  box-shadow: none !important;
}

/* 清除内部触发按钮的默认聚焦蓝色样式 */
.rs-picker-toggle:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* 清除输入框自身的聚焦蓝色样式，让边框继承外层橙色 */
.rs-picker-input-group .rs-input:focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* 调整输入框内部文字的内边距（按需修改数值） */
.rs-picker-input-group .rs-input {
  padding: 6px 0;
}

关键说明 #

• 必须覆盖内部嵌套元素的样式：.rs-picker-toggle和.rs-input的默认聚焦样式是残留蓝色的核心原因，需一并清除。
• 内边距可灵活调整：通过.rs-picker-input-group的padding控制整体外间距，通过.rs-input的padding控制输入框内部文字与边框的距离。
• !important的必要性：Rsuite内置样式优先级较高，需用!important强制覆盖自定义样式，确保生效。

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