如何在React Styled Components中选中-webkit-calendar-picker-indicator

问题原因 #

你的代码存在两个核心问题导致伪元素样式不生效：

• 你给input设置了display: none和width: 0%，会导致整个输入框包括内部伪元素都无法渲染，就算选择器写对也看不到效果
• 缺少清除浏览器默认伪元素样式的属性，默认样式会覆盖你写的自定义样式

正确实现代码 #

const DatePickerInput = styled.input.attrs({ type: 'date' })`
  /* 如果你需要做自定义触发按钮、隐藏原生输入框的效果，用opacity: 0而不是display:none */
  position: absolute;
  left: 100%;
  top: 10%;
  margin-left: 12px;
  width: 24px; /* 要给input设置实际宽高，否则伪元素无法渲染 */
  height: 24px;
  opacity: 0;
  padding: 0;
  margin: 0;

  &::-webkit-calendar-picker-indicator {
    /* 清除浏览器默认样式 */
    appearance: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    cursor: pointer;
  }
  
  /* 兼容火狐浏览器 */
  &::-moz-calendar-picker-indicator {
    appearance: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    cursor: pointer;
  }
`;

额外注意事项 #

• 如果要实现点击自定义按钮触发日期选择器的效果，只需要把这个透明的input定位覆盖在你的自定义按钮上方即可，用户点击按钮区域就会触发原生日期选择器
• 原生日期选择器的弹出面板样式无法通过CSS修改，如果需要完全自定义面板样式，还是需要自己写弹窗层加日期渲染逻辑

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