应用于mapbox弹出窗口的CSS无法加载

Question

我正在为弹出式菜单中的 mapbox 使用自定义CSS。但是CSS没有应用到弹出窗口。

 var popup=new mapbox.Popup({offset:25,closeButton:false,closeOnMove:true,className:'pop-up'})
                .setHTML(
                  '<div >'+
                    '<p>'+
                      Hello+
                    '</p>'+
                  '</div>'
                  );

我的CSS代码。

.pop-up{
    color: #F3F3DD;
    background-color: #91785D;
    border-color: #91785D;
    max-width: 50px;
    box-shadow: 3px 3px 2px #8B5D33;
    font-family: 'Oswald';
}

如何解决这个问题？

Answer 1

将你完全相同的代码添加到JSFiddle中，就可以毫无问题地显示出你想要的结果。https:/jsfiddle.netag9u8fvs.

因此，可能是你的CSS与HTML的链接不正确。

HTML:

var popup = new mapboxgl.Popup({
        offset:25,
        closeButton:false,
        closeOnMove:true,
        className:'pop-up'
    })
    .setLngLat([-96, 37.8])
    .setHTML('<h1>Hello World!</h1>')
    .addTo(map);

CSS.如果你没有注意到你的代码和链接的JSFiddle之间的任何差异，这可能是你的自定义CSS没有应用的原因。

.pop-up{
    color: #F3F3DD;
    background-color: #91785D;
    border-color: #91785D;
    max-width: 50px;
    box-shadow: 3px 3px 2px #8B5D33;
    font-family: 'Oswald';
}

如果你没有注意到你的代码和链接的JSFiddle之间的任何差异，这可能是导致你的自定义CSS没有按预期应用的原因，你可以在这里用一个JSFiddle的链接来重现你所看到的错误，并在这里发表评论，这样我们就可以更仔细地查看。