Search code examples
angulartypescriptopenlayers-5

OpenLayers cannot style dragBox

I'm using Angular7/Typescript with OpenLayers 5 and I've added a DragBox from from 'ol/interaction';

mapValues.drawObj = new DragBox({
  class: 'myDragBox'
});
mapValues.map.addInteraction(mapValues.drawObj);

I've added style to my scss file

.ol-myDragBox{
border-color: red;
border-width: 3px;
background-color: rgba(255,255,255,0.4);
}

No style shows...

I also tried putting this style and several other variation directly in the HTML in "Style" tags.

any help is greatly appreciated!

UPDATE Per the comment I changed my code to...

mapValues.drawObj = new DragBox({
className: 'myDragBox'
});
mapValues.map.addInteraction(mapValues.drawObj);

.myDragBox {
background-color: rgba(255,255,255,0.4);
border-color: rgba(100,150,0,1);
}

...and I still have no style, all DragBox events fire though.

UPDATE When I look at the style in developer tools it looks like this...

.ol-dragbox[_ngcontent-c6]{
  background-color: rgba(255,255,255,0.4) !important;
  border-color: rgba(100,150,0,1) !important;
  border-style: solid;
  border-width: 3px;
  }

If I remove "[_ngcontent-c6]" the style starts working...this is something that gets automatically appended.

Solution

  • I needed to add "::ng-deep" to the css class so it can reach inside it's encapsulation. For instance...

    ::ng-deep .myDragBox{
    background-color: rgba(255,255,255,0.3);
    border: 1px solid red;
  }