使用 styled-components 设置样式时使用 mapbox 的 mapbox-gl 渲染地图的问题

Question

我在使用样式组件时尝试渲染地图，但它不渲染地图。 使用样式化组件时，我的 console.log 显示地图为空。但是当我尝试使用内联样式时，它会渲染地图，并且我的 console.log 显示地图不为空。

这是我的地图组件的代码。

import React,{ useEffect, useState } from 'react';
import { useLocation } from 'react-router-dom';
import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css'
import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder'
import styled from 'styled-components'

const Map = ({
  setAddressSearch, 
  mapContainer, 
  adding, 
  setLongitude, 
  setLatitude,
  searching,
  allCars,
  allUsers,
  allCarImages
}) => {
  const location = useLocation();
  const [map, setMap] = useState(null);

  mapboxgl.accessToken = process.env.REACT_APP_MAPBOX_TOKEN
  useEffect(() => {
    console.log('my map: ', map)
    const initializeMap = () => {
      
      const newMap = new mapboxgl.Map({
        container: mapContainer.current,
        style: 'mapbox://styles/mapbox/streets-v11',
        center: [120.979683, 14.582919],  //[longitude, latitude]
        zoom: 9
      });
      const newGeocoder = new MapboxGeocoder({
        accessToken: mapboxgl.accessToken,
        mapboxgl: mapboxgl,
        marker: false
      })

      newGeocoder.on('result', (e) => {
        setAddressSearch(e.result.place_name)
      })
  
      setMap(newMap.addControl(newGeocoder))

      newMap.on('load', () => {
        setMap(map);
      });

      newMap.on('click', (event) => {
        // Get the coordinates of the click event
        event.preventDefault()
        const { lng, lat } = event.lngLat;
        console.log('longitude: ', lng)
        console.log('latitude: ', lat)
        setLongitude(lng)
        setLatitude(lat)

        // Update the marker coordinates to the clicked location
        markerAddCar.setLngLat([lng, lat]);
        newMap.setCenter([lng,lat])
      });

      const markerAddCar = new mapboxgl.Marker()
        .setLngLat([0, 0])
        .addTo(newMap);

      // setMap(mapAddCar);
      // setmarkerAddCar(markerAddCar);

      if(searching && allCars && allUsers && allCarImages){
        allCars.forEach(car => {
          const image = allCarImages.find(images => images.car_id === car.id)
          const owner = allUsers.find(owner => owner.id === car.owner_id)
          const popup = new mapboxgl.Popup()
            .setHTML(`
              <h3>${car.brand} ${car.model} ${car.year}</h3>s
              <p>${car.description}</p>
              <p>mileage: ${car.mileage} km</p>
              <p>price per day: ₱ ${car.price_per_day}</p>
              <h4>Owner information:</h4>
              <p>${owner.first_name} ${owner.last_name}</p>
              <p>${owner.contact_number}</p>
              <p>${owner.email}</p>
              <p>${owner.fb_link}</p>
            `)
          
          new mapboxgl.Marker({
            color: "red",
            })
            .setLngLat([car.longitude , car.latitude])
            .setPopup(popup)
            .addTo(newMap);
        })
      }

      setMap(newMap);

      return () => {
        newMap.remove()
      }
    };

    if (!map) {
      initializeMap();
    } else {
      // re-render the map on route change
      map.resize();
    }
  }, [location, allCars, allCarImages, allUsers]);

  const searchStyle = {
    width: "50%",
    maxWidth: "850px",
    height: "750px",
    objectFit: "cover",
    borderRadius: "10px",
  }

  const addCarStyle = {
    width: "100%",
    maxWidth: "550px",
    height: "500px",
    objectFit: "cover",
    borderRadius: "10px"
  }

  const Search = styled.div`
    width: 50%;
    max-width: 850px;
    height: 750px;
    object-fit: cover;
    border-radius: 10px;
  `

  return (
    // <div
    //   ref={mapContainer}
    //   style={searching ? searchStyle: addCarStyle}
    // />
    <Search ref={mapContainer} />
  )
}

export default Map

我想为我的所有组件使用样式化组件，因为我认为有一个问题，例如父组件使用 styled-components 设置样式，子组件使用内联样式设置样式，预期的行为没有完成。

这是我在根组件中的另一部分代码。

const Home = styled.div`
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  height:
  align-items: center;
  gap: 16px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px 10px;
`

<Home>
  <Map
    setAddressSearch={setAddressSearch} 
    mapContainer={mapContainer}
    adding={false}
    searching={true}
    allCarImages={allCarImages}
    allUsers={allUsers}
    allCars={allCars}
    setLongitude={setMapLng}
    setLatitude={setMapLat}
  />
  <SearchedCars
    searchedCars={allCars} 
    allCarImages={allCarImages} 
    handleItemClick={handleItemClick}
    handlePopupClose={handlePopupClose}
    activeItem={activeItem}
    itemPictures = {itemPictures}
  />
</Home>                

我不确定我的假设。我需要帮助。谢谢。

我尝试使用 styled-component 但它没有呈现。但是当我尝试内联样式时，它会渲染地图。