未使用的 div 出现在 react google 地图上,我无法设置样式
Unused div is appearing on react google maps and I can't style it
我正在使用 React Google 地图,我正在尝试设置它的样式。我想在 100% 宽度的容器中放置两个 div。它们都需要有 50% 的宽度,但是 React Google Maps 正在添加一个 div,我无法设置它的样式。
GoogleMap.js:
import React, { Component } from 'react';
import { Map, InfoWindow, Marker, GoogleApiWrapper } from 'google-maps-react';
import css from './GoogleMap.css';
export class GoogleMap extends Component {
render() {
return (
<Map className={css.googleMap} google={this.props.google} zoom={14}>
<Marker onClick={this.onMarkerClick}
name={'Current location'} />
<InfoWindow onClose={this.onInfoWindowClose}>
</InfoWindow>
</Map>
);
}
}
export default GoogleApiWrapper({
apiKey: ("API"),
})(GoogleMap)
ContactPage.js(这里我导入了google地图):
<LayoutWrapperMain className={css.staticPageWrapper}>
<h1 className={css.pageTitle}>Need help? Ask our experts for any help you need.</h1>
<div className={css.contentWrapper}>
<ContactForm />
<GoogleMap />
</div>
</LayoutWrapperMain>
GoogleMap.css:
.googleMap {
height: 100% !important;
width: 100% !important;
position: relative !important;
}
当我从控制台向隐藏的 div 添加 50% 的宽度时,地图显示良好,但我实际上找不到添加 div 的内容,我该如何做从代码端设置样式。这 DIV 不在代码中。
这里我通过console显示给看不到的div加50%有效:
我尝试在 ContactPage.js 中的 <GoogleMap />
周围添加 div,我尝试在 <Map>
标签周围添加 div,但没有任何帮助。
我真的很沮丧,现在几天都找不到解决办法,所以任何帮助都意义重大!
这是在线网站,您可以自行测试: https://trustmypetsitter.herokuapp.com/contactpage
我会继续警告您,这绝对是一种骇人听闻的方式。但它将适用于当前结构。
.ContactPage_contentWrapper__2aOFH > div:first-of-type {
width: 50%;
}
What does it do?
它将特定父项(在本例中为 CSS 内容包装器)中的第一个 div 设置为具有 50% 的宽度。
我正在使用 React Google 地图,我正在尝试设置它的样式。我想在 100% 宽度的容器中放置两个 div。它们都需要有 50% 的宽度,但是 React Google Maps 正在添加一个 div,我无法设置它的样式。
GoogleMap.js:
import React, { Component } from 'react';
import { Map, InfoWindow, Marker, GoogleApiWrapper } from 'google-maps-react';
import css from './GoogleMap.css';
export class GoogleMap extends Component {
render() {
return (
<Map className={css.googleMap} google={this.props.google} zoom={14}>
<Marker onClick={this.onMarkerClick}
name={'Current location'} />
<InfoWindow onClose={this.onInfoWindowClose}>
</InfoWindow>
</Map>
);
}
}
export default GoogleApiWrapper({
apiKey: ("API"),
})(GoogleMap)
ContactPage.js(这里我导入了google地图):
<LayoutWrapperMain className={css.staticPageWrapper}>
<h1 className={css.pageTitle}>Need help? Ask our experts for any help you need.</h1>
<div className={css.contentWrapper}>
<ContactForm />
<GoogleMap />
</div>
</LayoutWrapperMain>
GoogleMap.css:
.googleMap {
height: 100% !important;
width: 100% !important;
position: relative !important;
}
当我从控制台向隐藏的 div 添加 50% 的宽度时,地图显示良好,但我实际上找不到添加 div 的内容,我该如何做从代码端设置样式。这 DIV 不在代码中。
这里我通过console显示给看不到的div加50%有效:
我尝试在 ContactPage.js 中的 <GoogleMap />
周围添加 div,我尝试在 <Map>
标签周围添加 div,但没有任何帮助。
我真的很沮丧,现在几天都找不到解决办法,所以任何帮助都意义重大!
这是在线网站,您可以自行测试: https://trustmypetsitter.herokuapp.com/contactpage
我会继续警告您,这绝对是一种骇人听闻的方式。但它将适用于当前结构。
.ContactPage_contentWrapper__2aOFH > div:first-of-type {
width: 50%;
}
What does it do?
它将特定父项(在本例中为 CSS 内容包装器)中的第一个 div 设置为具有 50% 的宽度。