如何使用 vue js 自定义 leaflet Lopup 组件

Question

我如何自定义leafletjs 的LPopup 组件的设计。 遵循本指南：
https://vue2-leaflet.netlify.app/components/LPopup.html#demo

在 devtool 中检查了 Lpopup，然后抓住选择器调用 'leaflet-popup-content-wrapper' abd 然后添加一些 Css 样式（请参见下图），但它没有给出边框半径：0px。 它显示在该弹出窗口中。 我不想要。

 <l-popup class="map-popup">
         <h1>{{ name.toLocaleUpperCase().substring(0, 2) }}</h1>
         <h3>{{ address }}</h3>
 </l-popup>

和我的 CSS：

.map-popup,
.leaflet-popup-content-wrapper {
  background: #2c3e50;
  color: #fff;
  font-size: 16px;
  line-height: 24px;
  border-radius: 0px;
}

// also tried this way, but nothing seems to work for me: 

.leaflet-popup-content-wrapper {
  background: #2c3e50;
  color: #fff;
  font-size: 16px;
  line-height: 24px;
  border-radius: 0px;
}

我想在没有'border-radius'的情况下看到下面的样子。 我怎样才能做到这一点。 非常感谢您的任何帮助。 提前致谢！

Answer 1

我通过在App.vue中将以下 CSS 添加到我的全局应用程序样式中来完成这项工作

.leaflet-popup-content-wrapper {
    border-radius: 0 !important;
}