Невозможно применить пользовательские стили к Mapbox NavigationControl

Question

Я не могу переопределить стиль Map-box.Я попытался использовать этот пример ( Изменить цвет значков масштабирования Control Map Navigation Control * ) для цветов значка Map-box Navigation Control, но это не помогает.

Я попытался удалить таблицу стилей из основногофайл и использовать именованный класс, чтобы изменить стиль, но не работает.Я не уверен, что я делаю не так?

Код для добавления элемента управления навигацией выглядит следующим образом ..

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;
}