我的 map 是使用MapLibre GL实现的，但这个问题也会发生在Google Maps API或Mapbox GL上.
我有以下ReactJS组件:
import React, { useRef, useEffect } from "react";
import maplibregl from "maplibre-gl";
import map_style from "./style/style.json";
export default function Map() {
const mapContainer = useRef(null);
const map = useRef(null);
useEffect(() => {
if (map.current) return; //stops map from intializing more than once
map.current = new maplibregl.Map({
container: mapContainer.current,
style: map_style,
center: [12, 26],
});
});
return (
<div
ref={mapContainer}
className="my-map"
style={{ height: 500, width: 500 }}
/>
);
}
上面的代码呈现 map ，但我不想要固定的height和width.我需要根据父DOM元素、屏幕大小等应用不同的样式.
问题是，现在如果我在我的css文件中分配一个width和height，它不会应用于 map .另一方面，如果我在ReactJS组件中删除或更改style={{ height: 500, width: 500 }}的语法， map 将无法显示.
在这种情况下，我如何使用CSS设置样式？