Mapbox画布渲染在屏幕的一半

Question

我正在尝试将MapBox与React.js一起使用。这是我的代码：

import ReactMapboxGl, {Layer, Feature} from "react-mapbox-gl";

render() {
    const Map = ReactMapboxGl({
        accessToken: "..."
    });
    return (
        <div className="App">
            <Map style="mapbox://styles/mapbox/streets-v9"
                 containerStyle={{
                     height: "100vh",
                     width: "100vw",
                 }}>
                <Layer
                    style={{
                        position: 'absolute',
                        left: 0,
                        top: 0,
                    }}
                    type="symbol"
                    id="marker"
                    layout={{"icon-image": "marker-15"}}>
                    <Feature coordinates={[-0.481747846041145, 51.3233379650232]}/>
                </Layer>
            </Map>
            {/*<button onClick={this.requestLocation}>Refresh position</button>*/}
        </div>
    );
}

问题是，这是结果：

它总是精确到宽度的50％。我正在使用这个模块：https://github.com/alex3165/react-mapbox-gl

我搞砸了什么？

Answer 1

对不起，迟到的答案，这是由于css冲突造成的。尝试评论.App的文本对齐中心

.App {
   /* text-align: center; */
}

这应该工作！