OpenLayers не может стилизовать dragBox - PullRequest
Новая
       20

OpenLayers не может стилизовать dragBox

0 голосов
/ 24 июня 2019

Я использую Angular7 / Typescript с OpenLayers 5 и добавил DragBox из 'ol / взаимодействия'; 

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

Я добавил стиль в свой файл scss 

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

Нет стилей показывает ...

Я также пытался поместить этот стиль и несколько других вариантов непосредственно в HTML-теги "Style".

любая помощь очень ценится!

UPDATE За комментарий я изменил свой код на ... 

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

... и у меня до сих пор нет стиля, хотя все события DragBox запускаются.

UPDATE Когда я смотрю на стиль в инструментах разработчика, это выглядит так ... 

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

Если я удаляю "[_ngcontent-c6]", стиль начинает работать ... это то, что автоматически добавляется.

1 Ответ

0 голосов
/ 10 июля 2019

Мне нужно было добавить ":: ng-deep" к классу css, чтобы он мог проникнуть внутрь его инкапсуляции.Например ... 

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