Override css applied to all divs at highest level in React

Question

I am trying to integrate a Leaflet component into an already complex existing React App.

Leaflet is quite css-sensitive. In particular, I am facing the problem described in this answer: https://stackoverflow.com/a/47764037/14095529, where, in my case, the issue is CSS contamination of all div elements themselves.

Specifically, at the highest level of the App (App.js), some CSS is imported and imposed down throughout the tree which contains the following style:

div {
    overflow-y: hidden;
} 

I need to override this option for all divs inside my leaflet container for the map to show up (instead of a big grey square, as described in the aforementioned question).

But the app is already quite complex and its unclear what consequences removing that style altogether at the 'root' would have. So I'd like to change div styling only locally, for the content of my leaflet container only. But I am having difficulties doing that. Adding styling to the classes corresponding to these divs like:

.leaflet-pane {
    overflow-y: visible !important;
}

.leaflet-map-pane {
    overflow-y: visible !important;
}

inside the very CSS imported at the root App.js level does not have the desired effect.

If I look up the styling of divs like <div class="leaflet-pane leaflet-map-pane" ... </div>, I find that styling like:

.leaflet-map-pane {
    overflow-y: visible !important;
}

is carried through, but unfortunately (or perhaps unsurprisingly),

div {
    overflow-y: hidden;
}

is as well, which defeats the purpose and grey's out my map again. Other attempts, such as

div#mapid{
    overflow-y: visible;
}

(where "mapid" is the id of the leaflet div container) also fail to actually impact the divs inside the leaflet map container.

Any idea how I could locally override the styling of these divs and negate the overflow-y: hidden; option?