[BUG] - NextUI seems to break/clash with Mapbox GL JS

[newguy123-creator]

NextUI Version

2.6.5

Describe the bug

I'm adding NextUI to my existing React project that is also using mapbox gl js and tailwind
My app works perfectly fine without NextUI, but as soon as I add the tags around my app, the mapbox map no longer displays - everything else still works fine, but the map no longer displays

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Well just add NextUI to an existing React app that also has tailwind and mapbox gl js

Expected behavior

I expect the map to still work, but it appears that NextUI overrides something in Mapbox. Mapbox uses its own css by the way...

Screenshots or Videos

No response

Operating System Version

Windows 10 pro

Browser

Chrome

[linear]

ENG-1683 [BUG] - NextUI seems to break/clash with Mapbox GL JS

[wingkwong]

please provide a minimal reproducible environment.

[newguy123-creator]

please provide a minimal reproducible environment.

Reproducable with ANY existing React app with Tailwind and Mapbox GL JS. Just add NextUI and the map no longer displays

[newguy123-creator]

What does step4 in the Installation actualy do for Vite?

If I simply omit this step, then everything seems to work fine and the NextUI components work fine with my Mabbox components, so then what is step 4 actually for?

[newguy123-creator]

...spoke too soon
even if I omit NextUIProvider, mapbox map then break again as soon as I try and use a theme

        <main className="dark text-foreground bg-background">
            <App />
        </main>

It must be overriding the mapbox-gl/dist/mapbox-gl.css file I geuss :-(

[newguy123-creator]

Seems I may have resolved the issue, although not sure why!?!
My map container has a tailwind css styling on it "className="h-full w-full bg-[lightgrey]"
If I remove this style, then use the container's id and use regular css in my css file like so:

#map-container {
    width: 100%;
    height: 100vh;
}

...it seems to resolve the issue. Very weird, but it works

[wingkwong]

The provider is a component in NextUI that serves several important functions such as client-side routing, locale for internationalization, global prop control and etc.

The problem could be due to some styles conflicting. Without a reproducible environment, we couldn't investigate further.