无法将自定义样式应用于Mapbox NavigationControl

Question

我似乎无法覆盖地图框样式。我尝试将本示例（Change Mapbox Navigation Control zoom icons color）用于地图框导航控件图标颜色，但无济于事。

我试图从主文件中删除样式表，并使用命名的类来更改样式，但是不起作用。我不确定我在做错什么吗？

用于添加导航控件的代码如下所示。

let nav = new mapboxgl.NavigationControl({
   showCompass: false,
   showZoom: true
});

this.map.addControl(nav, "top-left");

CSS

.mapboxgl-ctrl-zoom-in {
   background-image: url(data:image/svg+xml;charset=utf8,<svg%20viewBox%3D%270%200%2020%2020%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27>%0A%20%20<path%20style%3D%27fill%3A%23ff0000%3B%27%20d%3D%27M%2010%206%20C%209.446%206%209%206.4459904%209%207%20L%209%209%20L%207%209%20C%206.446%209%206%209.446%206%2010%20C%206%2010.554%206.446%2011%207%2011%20L%209%2011%20L%209%2013%20C%209%2013.55401%209.446%2014%2010%2014%20C%2010.554%2014%2011%2013.55401%2011%2013%20L%2011%2011%20L%2013%2011%20C%2013.554%2011%2014%2010.554%2014%2010%20C%2014%209.446%2013.554%209%2013%209%20L%2011%209%20L%2011%207%20C%2011%206.4459904%2010.554%206%2010%206%20z%27%20%2F>%0A<%2Fsvg>%0A) !important;
}

.mapboxgl-ctrl-geocoder {
   background: #222;
}