Can I have the className of a leaflet divIcon inside the <style scoped> section of a vue compo-CodePudding

I have a Vue 2 sample project at https://github.com/ericg-vue-questions/leaflet-test

      const cloudIcon = L.divIcon({
        html: thecloud,
        className: 'my-custom-icons',
        iconSize: [size, size],
        iconAnchor: [size/2, size/2]
      })

and, for leaflet to see the my-custom-icons style, I wrote:

<style scoped>
  #mapContainer {
    width: 500px;
    height: 500px;
  }
</style>

<style>
  .my-custom-icons {
    background-color: red;
  }
</style>

I would like the style section to look like:

<style scoped>
  #mapContainer {
    width: 500px;
    height: 500px;
  }

  .my-custom-icons {
    background-color: red;
  }
</style>

But when I place my-custom-icons inside of the components scoped section, the divIcon cannot find it.

Can I organize my style section like this? If so, how?

CodePudding user response：

You are looking for DeepSelectors.

#mapContainer >>> .my-custom-icons {
  background-color: red;
}