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?

enter image description here


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.


[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.

  • This will not work. Angular encapsulates styles in its components. So when one declares a component local style it will not be applied to markup outside of its own template. – Grmpfhmbl Mar 1 '19 at 17:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.