如何从 WidgetControl 中删除阴影？答案

【问题标题】：how to remove shadow from a WidgetControl?如何从 WidgetControl 中删除阴影？
【发布时间】：2022-01-21 17:47:55
【问题描述】：

使用ipyleaflet 文档中的以下代码，我得到了一个带有 2 个额外自定义小部件的漂亮显示。这些小部件有一个小的黑色阴影，我想移除它。

from ipyleaflet import Map, basemaps, WidgetControl
from ipywidgets import IntSlider, ColorPicker, jslink

m = Map(center=(46.01, 6.16), zoom=12, basemap=basemaps.CartoDB.DarkMatter)
zoom_slider = IntSlider(description='Zoom level:', min=0, max=15, value=7)
jslink((zoom_slider, 'value'), (m, 'zoom'))
widget_control1 = WidgetControl(widget=zoom_slider, position='topright')
m.add_control(widget_control1)

color_picker = ColorPicker(description='Pick a color:')
widget_control2 = WidgetControl(widget=color_picker, position='bottomright')
m.add_control(widget_control2)
m

这是没用的，因为我使用的是 jupyterlab 的深色主题（将阴影转换为可怕的白色阴影），如下所示：

我在documentation中没有找到任何参数，这可能吗？

【问题讨论】：

标签： python leaflet widget ipyleaflet

【解决方案1】：

在ipyleaflet 代码中挖掘，似乎阴影是强制性的，因为它只在这个css file 中设置。 js file 中设置了不同的选项，这意味着无法从 python 代码中删除阴影。

作为一个丑陋的修复，我在导入 ipyleaflet 之前直接在顶部单元格上强制了一些 css：

# ugly fix to remove shadow from map custom widgets
from IPython.display import display, HTML
display(HTML("<style>.leaflet-widgetcontrol {box-shadow: none}</style>"))

【讨论】：