React项目中嵌入的地图无法调整尺寸该如何解决？

你遇到的样式不生效问题，核心是@react-google-maps/api的GoogleMap组件默认会继承父容器100%宽高，若父容器或上层根节点未设置明确宽高，自定义样式就不会生效，可通过以下任意一种方案解决：

方案1：给包裹容器设置明确宽高 #

不要仅设置max-width、max-height，这两个属性仅限制最大尺寸，需要先配置基础宽高值：

/* 你的全局CSS或对应模块CSS文件 */
.mapSection {
  width: 500px; /* 可按需替换为vw、百分比等单位 */
  height: 300px; /* 可按需替换为vh、百分比等单位 */
}

如果需要使用最大宽高限制，搭配基础宽高即可生效：

.mapSection {
  width: 90%;
  height: 50vh;
  max-width: 800px;
  max-height: 500px;
}

如果使用百分比作为单位，需要先给上层根节点设置高度：

html, body, #root {
  height: 100%;
  margin: 0;
}

方案2：直接通过组件props设置样式（优先级最高，避免被其他样式覆盖） #

GoogleMap组件自带containerStyle属性，直接传入样式对象即可，无需额外写CSS：

// GoogleMap.js 文件中修改组件代码
<GoogleMap
  containerStyle={{
    width: '500px',
    height: '300px'
  }}
  // 保留你原有其他属性：zoom、center、onLoad等
/>

内容的提问来源于stack exchange，提问作者Ugurcan Ucar