OpenLayers 8.1.0地图控件CSS修改失效，求有效修改方案

在OpenLayers 8.1.0中，地图控件的CSS样式修改遇到了问题：仅能通过CSS设置控件位置，background-color、color、border-width、border-radius等属性要么完全不生效，要么效果异常，此前6.x版本直接修改ol/ol.css的方式不再适用。这是因为OL8重构了控件的DOM结构与样式系统，默认样式优先级更高，且控件内部元素（如按钮）有独立的样式定义，直接修改容器类名无法覆盖。

解决方案1：提高选择器优先级，定位到内部元素 #

直接选中控件内部的按钮元素，覆盖默认样式，同时处理hover、focus等交互状态：

html, body {
    margin: 0;
    height: 100%;
}
#map {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}
/* 缩放控件容器样式 */
.ol-zoom {
    margin-left: 20px;
    margin-top: 20px;
    border: 4px solid #000;
    border-radius: 20%;
}
/* 缩放按钮样式 */
.ol-zoom button {
    background-color: red;
    color: blue;
    border: none; /* 移除默认按钮边框 */
    border-radius: inherit; /* 继承容器的圆角 */
}
/* 按钮交互状态样式 */
.ol-zoom button:hover,
.ol-zoom button:focus {
    background-color: darkred;
    color: white;
}

解决方案2：添加自定义类名，隔离样式 #

创建控件时指定自定义类名，避免与默认样式冲突，同时让样式更具针对性：

修改后的JS代码：

import './style.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import Zoom from 'ol/control/Zoom.js';

const zoomControl = new Zoom({
  zoomOutLabel: 'E',
  zoomInLabel: 'I',
  delta: 0.5,
  className: 'custom-zoom-control' // 添加自定义类名
});

const map = new Map({
  target: 'map',
  controls: [zoomControl],
  layers: [
    new TileLayer({
      source: new OSM()
    })
  ],
  view: new View({
    center: [0, 0],
    zoom: 2
  }),
});

对应的CSS代码：

html, body {
    margin: 0;
    height: 100%;
}
#map {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}
.custom-zoom-control {
    margin-left: 20px;
    margin-top: 20px;
    border: 4px solid #000;
    border-radius: 20%;
}
.custom-zoom-control button {
    background-color: red;
    color: blue;
    border: none;
    border-radius: inherit;
}
.custom-zoom-control button:hover {
    background-color: darkred;
    color: white;
}

解决方案3：完全禁用默认OL样式（不推荐） #

如果需要完全自定义所有控件样式，可以不导入OpenLayers的默认ol.css，自行编写所有控件的样式。但此方法需要覆盖所有控件的默认样式，适合高度定制的场景。

完整示例说明 #

以上两种方案都能解决你的问题，方案2的自定义类名方式更利于维护，避免影响其他默认控件。修改后，缩放控件的背景色、文字颜色、边框和圆角都会按预期生效。

内容的提问来源于stack exchange，提问作者Jiri Sovina