问题
在vue3中使用openlayers，添加一个全局控件。全局控件的按钮比较小，无法展示自定义的按钮名称。需要调整下按钮的尺寸。但是配置的className中修改的样式一直不生效。
原因
没有将className写在全局样式中。
例如在如下代码中，.custom-full-screen不能放在<style scoped>标签中，必须放在<style>标签内。
<template>
<div>
<div ref="sourceRef" class="map-out">
<div ref="screenRef" class="custom-btn-ref"></div>
<div ref="mapRef" class="map-x"></div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import useInitMap from './hooks/useInitMap'
import { FullScreen } from 'ol/control.js'
let mapRef = ref()
let screenRef = ref()
let sourceRef = ref()
const { initMap } = useInitMap()
onMounted(() => {
let map = initMap(mapRef)
let fullScreenCon = new FullScreen({
labelActive: '已开启全屏',
label: '设置全屏',
className: 'custom-full-screen',
target: screenRef.value,
source: sourceRef.value
})
map.addControl(fullScreenCon)
})
</script>
<style scoped>
.map-out {
width: 100%;
height: 600px;
background-color: green;
}
.map-x {
width: 80%;
height: 500px;
margin: auto;
}
</style>
<style>
.custom-full-screen button {
width: 6em;
height: 3em;
}
</style>
