React 移动端`1px`像素边框

1.准备hairline.scss文件

2.给需要的类名，添加样式

---

其他资料

参考 antd-mobile 的实现

实现原理

---

 hairline.scss 文件 具体的代码如下

// 参考： https://github.com/ant-design/ant-design-mobile/blob/v2/components/style/mixins/hairline.less
// 原理： 伪元素 + transform 缩放
//       伪元素::after或::before是独立于当前元素，可以单独对其缩放而不影响元素本身的缩放
@mixin scale-hairline-common($color, $top, $right, $bottom, $left) {
  content: '';
  position: absolute;
  display: block;
  z-index: 1;
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
  background-color: $color;
}

@mixin hairline($direction, $color: #000, $radius: 0) {
  @if $direction == top {
    border-top: 1px solid $color;