How to specify custom CSS to an OpenLayers Zoom Control in Angular 6?

Question

I am attempting to modify the Zoom buttons on OpenLayers 5.3 in an Angular 6 component. And I'm using this OL3 question as a starting point: Creating new buttons and removing default ones - Openlayers-3.

However, my custom CSS class for my component is being ignored (or overwritten with the original ol.css for the zoom buttons).

this.map = new OlMap({
  target: 'map',
  layers: [
    new OlTileLayer({
      source: new OlOSM()
    })
  ],
  view: this.view,
  controls: [
    new OlZoom({ className: 'custom-zoom' })
  ]

And I've placed .custom-zoom and .custom-zoom button in my scss for my component, but they do not render for the Zoom buttons.

Any ideas on an Angular 6 solution to custom CSS classes for the Zoom buttons?

Answer 1

In Angular a style in @Component will only be applied to its own template (see https://angular.io/guide/component-styles#style-scope) You basically have two options:

1. Overwrite the style in your global style.scss.

   .ol-control button {
       background-color: red;
   }
   

2. (deprecated) Use ::ng-deep in your component style.

   ::ng-deep .ol-control button {
       background-color: red;
   }
   

For more information on the whole /deep/ deprecation see this question for example.

Answer 2

[This should be a comment] You could overwrite the styles of ol.css with your custom ones. Just take their file (https://github.com/openlayers/openlayers/blob/master/src/ol/ol.css) copy the ones you need to your scss file, customize it, and then import it after ol.css.