Leaflet中GeoJSON自定义类样式不生效，全局leaflet-interactive类却生效的原因咨询

我来帮你拆解下这个问题的核心原因，大概率是CSS模块化机制在搞鬼：

• 如果你是在Vue、React这类框架项目中开发，默认开启的CSS模块化会把你写的自定义类名（比如.poly）编译成带唯一哈希后缀的类名（例如.poly_xyz123），但你通过Leaflet的className配置给DOM元素加上的是原始的poly类名，这就导致编译后的样式找不到对应的DOM元素，自然不会生效。
• 而.leaflet-interactive是Leaflet内置的全局类名，CSS模块化不会对这类第三方库的全局类名进行哈希转换，所以你写:global(.leaflet-interactive)或者直接引用这个类名时，样式能精准匹配到DOM元素，也就正常生效了。

你可以打开浏览器开发者工具验证一下：

1. 查看样式面板里你的.poly类对应的实际类名，会发现它带了哈希后缀
2. 再看DOM元素上的类名，还是原始的poly，两者不匹配，这就是样式不生效的关键

如果要让自定义类的样式生效，有两种常用解决办法：

• 在CSS模块化文件里，把自定义类声明为全局类：

  :global(.poly) {
      transition: all 500ms ease-in-out;
  }
  

• 把这个自定义类的样式写在项目的全局样式文件中（比如index.css这类不会被模块化处理的文件），这样类名不会被修改，就能匹配到DOM上的poly类了。

备注：内容来源于stack exchange，提问作者louislugas