Vue Leaflet Change Style of Zoom Control

Question

I am trying to make a Map App in a Dark Mode with Vue and for some reason I cannot change the style of the Zoom Control. Currently I am trying the following

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>

But the Zoom Control still looks normal.

I have tried the same with the :options="{class: 'leaflet-control-zoom'}" which also does nothing. What am I missing here?

Answer 1

You can try putting the class out of the options. E.g.: <l-control-zoom position="topleft" class="leaflet-control-zoom"></l-control-zoom>

Answer 2

I ran into the same issue.

I tried around and changed :options="{zoomControl: false}" in <l-map> to :options="{zoomControl: true}" and it worked.