Set class className in event callback in Flyer

Question

I want to set the style of the geojson function by setting it className. This works great if placed directly on such a function:

L.geoJson(geojson, {
    onEachFeature: function (feature, layer) {
        layer.setStyle({className: 'grid-cell'});
    }
}).addTo(map);

with the style defined in the .css file

path.grid-cell{
  stroke-opacity: 1;
  stroke: #444;
  fill: #aaa;
}

However, it does not work if it is added to the function event callback:

L.geoJson(geojson, {
    onEachFeature: function (feature, layer) {
        layer.on('click', function(e){
          this.setStyle({className: 'grid-cell'});
          this.bringToFront();
        });
    }
}).addTo(map);

Surprisingly, it setStyle({<style_options>});works anyway for any other L.path except className, for example. color, fillOpacity, weightEtc.

eg.

L.geoJson(geojson, {
    onEachFeature: function (feature, layer) {
        // this works
        layer.setStyle({color: '#faa', fillOpacity: 0.4, weight: 1});

        // this works too
        layer.setStyle({className: 'grid-cell'});

        layer.on('click', function(e){
          // and this works
          layer.setStyle({color: '#afa', fillOpacity: 0.4, weight: 2});

          // BUT THIS DOES NOT WORK
          this.setStyle({className: 'grid-cell'});
          this.bringToFront();
        });
    }
}).addTo(map);

Any idea what's here? Shown here is a plunker illustrating the problem.

Answer 1

: https://github.com/Leaflet/Leaflet/issues/2662. :

, setStyle . , , leaflet-, . , API setClassName() add/removeClass.