1

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

我尝试过浏览 Grommet 盒子道具和各种 CSS 样式设置，但没有成功。

应用程序.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}/>
    );

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

4

0 回答 0