关于UIKit的抽屉 uk-offcanvas 只有黑色样式的问题

从uikit官方站点复制抽屉的代码本地运行，你会发现，它的抽屉默认居然是黑色的，根本不是官网上那种白色的样式。

查询了好久，再github上issue上看到一些解释（ OffCanvas only Dark），大概释义如下：

官方的抽屉只有dark模式，不支持白色模式，也不支持反色的class（uk-light和uk-dark）；

而且官方对这个抽屉复写样式特别多，多到离谱，你能用上的元素，他都复写了，导致你就算把背景色复写成白色，你元素的字体颜色还是白色，而且nav组件的icon也被复写成白色svg了，这某种程度上复写样式基本无解了。

唯一的解决办法就是不用官方的uk-offcanvas-bar这个样式，换一个自定义的样式就行，根据issue说明，我们需要这样写：

<div id="自定id" uk-offcanvas="overlay: true;selPanel: .uk-offcanvas-bar-light;">
   <div  class="uk-offcanvas-bar-light">
    ...
   </div>
</div>

css添加如下内容：

.uk-offcanvas-bar-light {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -270px;
  box-sizing: border-box;
  width: 270px;
  padding: 20px 20px;
  background: #f8f8f8;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.uk-offcanvas-bar-animation {
  transition: left 0.3s ease-out;
}

@media (min-width: 960px) {
  .uk-offcanvas-bar-light {
    left: -350px;
    width: 350px;
    padding: 40px 40px;
  }
}

.uk-offcanvas-flip .uk-offcanvas-bar-light {
  left: auto;
  right: -270px;
}

.uk-offcanvas-flip .uk-offcanvas-bar-animation {
  transition-property: right;
}

.uk-offcanvas-flip .uk-open>.uk-offcanvas-bar-light {
  left: auto;
  right: 0;
}

@media (min-width: 960px) {
  .uk-offcanvas-flip .uk-offcanvas-bar-light {
    right: -350px;
  }
}

.uk-offcanvas-flip .uk-offcanvas-reveal .uk-offcanvas-bar-light {
  left: auto;
  right: 0;
}

.uk-offcanvas-reveal .uk-offcanvas-bar-light {
  left: 0;
}

.uk-open>.uk-offcanvas-bar-light {
  left: 0;
}

然后你就拥有一个白色的抽屉了，样式上可以根据自己项目要求改写，问题不大。