Marker clusters icons are not visible

[RoboVij]

We're creating a wrapper component for leaflet and some other plugins included in it using stencil.js.

Normal marker icons after zooming are working fine. But the cluster icons (the colored circles) are not visible. The numbers, of the clusters, are visible though. In other projects everything's working fine. But in this stencil project, it's not. Following are my imports:

import * as Leaflet from 'leaflet';
//import 'leaflet/dist/leaflet.css';
import 'leaflet.markercluster';
import 'leaflet.markercluster/dist/MarkerCluster.css';
import "leaflet.markercluster/dist/MarkerCluster.Default.css";
//import 'leaflet.markercluster/dist/leaflet.markercluster';

I tried to to use the custom cluster icons, but that's not working too.

var mcg = Leaflet.markerClusterGroup({
  chunkedLoading: true,
  spiderfyOnMaxZoom: true,
  iconCreateFunction: function(cluster) {
    var count = cluster.getChildCount();
    var digits = (count + '').length;
    return new Leaflet.DivIcon({
      html: '<div><span>' + count + '</span></div>',
      className: 'cluster digits-' + digits,
      iconSize: null
    });
  },
});

In this setup, I commented MarkerCluster.Default.css import and imported the new css file.
What could be the problem? Any suggestions?

[RoboVij]

The problem was that I was importing the css files in the .tsx file. It need to be imported in the global styling .css file or the .css file of the respective component. It's stencil.js specific, I guess.