OpenLayers 无法设置 DragBox 的样式答案

【问题标题】：OpenLayers cannot style dragBoxOpenLayers 无法设置 DragBox 的样式
【发布时间】：2019-07-11 04:10:11
【问题描述】：

我将 Angular7/Typescript 与 OpenLayers 5 一起使用，并从“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]”，样式就会开始工作...这是自动附加的内容。

【问题讨论】：

根据documentation，类参数应该是className。
我尝试了你的建议，仍然没有风格。
你可以试试这个.myDragBox { background-color: rgba(255,255,255,0.4) !important; border-color: rgba(100,150,0,1) !important; }
是组件中的 scss 文件还是“全局”scss 文件？
组件的scss文件

标签： angular typescript openlayers-5

【解决方案1】：

我需要在 css 类中添加“::ng-deep”，以便它可以到达它的封装内部。比如……

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

【讨论】：