如何在 react-google-maps reactjs 中更改 infoWindow 样式

Question

我想更改信息窗口的样式：创建一个 CSS 文件来更改 .gm-style .gm-style-iw-d 和 .gm-style .gm-style-iw-c proprty 但没有什么可改变的，我想更改或禁用 [=14=] ，over-flow:scroll ，padding-right ,...喜欢这张照片: 我读了这个 link: InfoWindowOptions 并写下这一行以进行更改 maxWidth ： <InfoWindow options={{maxWidth:300}} onCloseClick={() => togelOpenCloseInfoWindos}> 但没有什么可以改变的。这是我的代码：

 {isOpen &&
                            <InfoWindow options={{ maxWidth: 300 }} style={{ backgroundColor: 'red' }} onCloseClick={() => togelOpenCloseInfoWindos}>
                                <Grid container style={{ paddingLeft: 8, paddingRight: 8, }} xs={12} spacing={0} >
                                    <Grid item xs={7} sm={8} zeroMinWidth>
                                        <Typography noWrap component="p">
                                            <Box fontWeight="bold">
                                                {props.MyProps.locations.NICKNAME}</Box>
                                        </Typography>
                                        {/* <p className={classes.card_title}>{car.NICKNAME}</p> */}
                                    </Grid>
                                    <Grid item xs={5}>{speed_logo(props.MyProps.locations)}</Grid>
                                    <Grid item xs={7} style={{ marginTop: -9 }}><p className={classes.card_time}>{timeToShow(props.MyProps.locations.SENTDATE)}</p></Grid>
                                    <Grid item xs={5} style={{ marginTop: -9 }}>{tempture_logo(props.MyProps.locations)}</Grid>
                                    <Grid xs={12}><Typography component='p' className={classes.card_Address}>{props.MyProps.locations.POSDESCRIPTION}</Typography></Grid> </Grid>
                            </InfoWindow>
                        }

请帮我更改信息窗口的样式

Answer 1

我不确定如何通过 CSS 文件中的 element.style{} 更改您的信息窗口，但是当我将它放在 .gm-style .gm-style-iw-c {} 中时，我成功地覆盖了这些值 CSS 文件并在每一行附加 !important，如下所示 code:

.gm-style .gm-style-iw-c {
   padding-right: 10px !important;
    padding-bottom: 0px !important;
    max-width: 500px !important;
    max-height: 326px !important;
    min-width: 0px !important;
    position: absolute;
    box-sizing: border-box;
    overflow: hidden;
    top: 0;
    left: 0;
    transform: translate(-50%,-100%);
    background-color: #dd9191;
    border-radius: 8px;
    box-shadow: 0 2px 7px 1px rgba(0,0,0,0.3);
}

注意：这可能是您要查找的内容，但是 class 名称将来可能会被 Google Maps Platform 更改。

至于 InfoWindow 中的 maxWidth 选项，我尝试在我的 reactjs 代码中使用它，而不是在我的 CSS 文件中覆盖它，并且它工作正常。这是我的 code:

中的样子

<InfoWindow onCloseClick={this.props.handleCloseCall} options= {{maxWidth : 100 }}>
                 <span>This is InfoWindow message!</span>
             </InfoWindow>

注意：您需要在所提供的代码的 index.js 中使用您自己的 API 键更改 YOUR_API_KEY_HERE 字符串才能正常工作。

希望对您有所帮助！

如何在 react-google-maps reactjs 中更改 infoWindow 样式

how to change infoWindow Style in react-google-maps reactjs

reactjs

google-maps

react-google-maps