Question

我是React和Grommet的新手，并且已经完成了入门教程。当我将google map添加到主容器时，它将渲染并填充整个屏幕。但是，当我单击通知图标以加载侧栏时，它仅在侧面的一小列中呈现。有没有一种方法可以编辑样式以自动调整宽度，还是需要将容器宽度作为单击按钮时会更改的属性？（请原谅任何问题格式错误，因为这是我的第一篇文章。）

我尝试浏览Grommet框道具和各种CSS样式设置，但均未成功。

App.js：

const { showSidebar } = this.state;
    return (
      <Grommet theme={theme} full>
        <ResponsiveContext.Consumer>
          {size => (
            ...

              <Box direction='row' flex overflow={{ horizontal: 'hidden' }}>
                <Box
                  align='start'
                  justify='start'
                  fill='horizontal'
                  responsive='true'              
                >
                  <MapContainer />
                </Box>

                {!showSidebar || size !== 'small' ? (
                  <Collapsible direction='horizontal' open={showSidebar}>
                    <Box
                      flex
                      width='medium'
                      background='light-2'
                      elevation='small'
                      align='center'
                      justify='center'
                    >
                      sidebar
                    </Box>
                  </Collapsible>
                ) : (

...

}
              </Box>
            </Box>
          )}
        </ResponsiveContext.Consumer>
      </Grommet>
    );

MapContainer.js：

return (
      <Map google={this.props.google} zoom={14}/>
    );

我希望地图缩小以填充容器/在边栏加载时容器收缩。

用户打开侧栏时，Google地图不会缩小

0 个答案: