Javascript Vue传单更改缩放控件的样式

我正在尝试使用Vue在黑暗模式下制作地图应用程序，由于某些原因，我无法更改缩放控件的样式。目前我正在尝试以下方法

template>
  <div class="main-map">
    <l-map :zoom="zoom" :center="currLatLng" :options="{zoomControl: false}">
      <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
      <l-control-zoom position="topleft" :options="{class: 'leaflet-control-zoom'}"></l-control-zoom>
    </l-map>
  </div>
</template>

<script>
import {LMap, LTileLayer, LCircleMarker, LControlZoom} from 'vue2-leaflet'

export default {
  name: 'Map',
  components: { LMap, LTileLayer, LCircleMarker, LControlZoom },
  props: ['currLatLng', 'trackpoints', 'collectedPoints'],
  data() {
    return {
      zoom:15,
      url:'https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png',
      attribution:'&copy; <a href="https://stadiamaps.com/">Stadia Maps</a>, &copy; <a href="https://openmaptiles.org/">OpenMapTiles</a> &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
    }
  }

<style scoped>
.leaflet-control-zoom a {
  color: white !important;
  background: rgba(0, 0, 0, 0.5) !important;
  transition: all 0.5s ease;
}

.leaflet-control-zoom a:hover {
  color: white !important;
  background: rgba(0, 0, 0, 0.9) !important;
}

</style>

模板>
从“vue2传单”导入{LMap、LTileLayer、LCircleMarker、LControlZoom}
导出默认值{
名称：'地图'，
组件：{LMap、LTILELLAYER、LCircleMarker、LControlZoom}，
道具：['currLatLng'，'trackpoints'，'collectedPoints']，
数据（）{
返回{
缩放：15，
网址：'https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z} /{x}/{y}{r}.png'，
属性：“©；，©；©；贡献者”
}
}
.传单控件缩放a{
颜色：白色！重要；
背景：rgba（0,0,0,0.5）！重要；
过渡：所有0.5s缓解；
}
.传单控件缩放a：悬停{
颜色：白色！重要；
背景：rgba（0,0,0,0.9）！重要；
}

但缩放控制看起来仍然正常

---

我对

：options=“{class:'传单控件缩放“}”也尝试了相同的操作。

它也不起任何作用。我这里缺少什么？

您可以尝试将该类从选项中删除。例如：