如何在react-google-maps reactjs中更改infoWindow样式[重复]

Question

我想改变 infowindow 的样式： 创建一个 CSS 文件来更改 .gm-style .gm-style-iw-d 和 .gm-style .gm-style-iw-c 属性，但没有什么可更改的，我想更改或禁用 max-width ，over-flow:scroll ，padding-right，...就像这张照片： 我读了这个链接：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>
                        }

请帮我更改 infoWindow 的样式

Answer 1

我不确定如何通过 CSS 文件中的 element.style{} 更改您的 InfoWindow，但是当我将其放入 CSS 文件的 .gm-style .gm-style-iw-c {} 并在每一行附加 !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);
}

注意：这可能是您要查找的内容，但是 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 字符串，以使其正常工作。

希望这会有所帮助！