Leaflet tooltip classname not applying

Question

I am trying to overwrite the styling of the leaflet tooltips on a map but it does not seem to use my CSS style. I am using angular and electron but as far as I know neither should cause any changes to leaflet. (leaflet is installed as a dependency)

My marker adding function looks like this at the moment:

data.flights.map(function(plane){
  const positionVariable = {
    lat: parseFloat(plane.position.latitude),
    lng: parseFloat(plane.position.longitude)
  }
  if(westBound <= positionVariable.lng && eastBound >= positionVariable.lng && northBound >= positionVariable.lat && southBound <= positionVariable.lat){
    var tooltipOptions = {
      classname: 'labelstyle',
      permanent: true,
      direction: 'right',
      opacity: 1.0
    }

    var tooltipContent = plane.callsign

    return L.marker(positionVariable, {icon: greensquare}).addTo(markers).bindTooltip(tooltipContent, tooltipOptions);
  } else {
    return;
  }
})

The markers and the tool tips are applied correctly however they are missing the custom style found in the scss file for the component in which the map is displayed:

.labelstyle{
  color: green;
  font-size:14px;
  font-weight: 700;
  background-color: none;
  border-color: none;
  background: none;
  border: none;
}

Answer 1

Use className instead of classname. Remember to check the Leaflet documentation for the right spelling. Stuff in javascript is case-sensitive, and most of the time you won't get any warnings about that.