2C 兼容小技巧合集

以前一直是2b端没遇到过啥兼容性或者奇奇怪怪改UI的地方，现在换成C端业务，就在这里记录下遇到的奇奇怪怪的需求以及解决办法吧。
这篇文章争取长久更新，希望自己能坚持写下去。

修改input date默认框的小图标

在这里插入图片描述
因为干不过UI&PM 所以这个需求接了：
修改样式：新设计稿的小图标以及位置都换了，所以做法是用白色的div覆盖原来的图片，再添加新图标，但是应为这个点击事件是在原图标上的，干掉原图标会导致点击事件不触发，刚开始我是想说给这个新图标加点击事件，触发原生的showPicker事件，但是safira不兼容，这个方案不合适，后面小伙伴帮忙查到了新方案，换个思路，给input加上这个 css 属性 pointer-events: none; 事件就在新icon上被触发了,核心代码如下：

<Input type="date"/>
<StyleDateBlank /> // 白色遮罩
<StyleDateIconWrap /> // 新图标

export const StyleDateInputWrap = styled(Box)`
  position: relative;
`;
export const StyleDateIconWrap = styled(Box)`
  position: absolute;
  background-color: #fff;
  width: 20px;
  height: 20px;
  background-image: url(${calendarIcon});
  background-size: 20px 20px;
  right: 16px;
  top:50%;
  transform: translateY(-50%);
  pointer-events: none;
`;

export const StyleDateBlank = styled(Box)`
  position: absolute;
  background-color: #fff;
  width: 20px;
  height: 20px;
  right: 20px;
  top:50%;
  transform: translateY(-50%);
  pointer-events: none;
`;