vue3中openlayers的控件按钮配置的样式不生效

问题
在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>