我在OpenLayers 5中使用了Angular7 / Typescript,并且从'ol / interaction'中添加了一个DragBox;
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的“样式”标签中。
非常感谢您的帮助!
更新 根据评论,我将代码更改为...
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事件都会触发。
更新 当我在开发人员工具中查看样式时,看起来像这样...
.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]”,样式就会开始起作用...这是自动添加的内容。
答案 0 :(得分:0)
我需要在CSS类中添加“ :: ng-deep”,以便它可以到达其封装内部。 例如...
::ng-deep .myDragBox{
background-color: rgba(255,255,255,0.3);
border: 1px solid red;
}