Recommended way to deal with overwriting

[matthiasschaub]

I love using pico.css. Using LeafletJS or OpenLayers I embed a map on my website. Since pico.css styles HTML elemtents the elements such as buttons of the embedded map are also styled, but do not look great. See this image.

A minimal example can be found here https://github.com/matthiasschaub/pico-map-playground

Relevant code snippets are:

HTML:

        <link rel="stylesheet" href="styles.css" />
        <link rel="stylesheet" href="css/custom.css"/>
        <link rel="stylesheet" href="css/leaflet.css" />
        <script src="js/leaflet.js"></script>
        ...
        <section id="map" aria-label="Map">
            <div class="container" align="center">
                <div class="leaflet-container" id="leafletmap"></div>
            </div>
        </section>

custom.css

.leaflet-container {
    height: 600px;
    /* width: 960px; */
    max-width: 100%;
    max-height: 100%;
}

Using following css:

.leaflet-container {
  height: 600px;
  /* width: 960px; */
  max-width: 100%;
  max-height: 100%;
}

.leaflet-container [role="button"] {
    all : revert;
}

The map will look like this (notice the +/- zoom buttons in the upper left corner and the missing layer buttons)

Is there a recommended way in the spirit of pico.css to deal with such cases. E.g. disable styling for the map but keep default style of buttons.

[wdporter]

.leaflet-container button {
    * : revert /* or maybe unset */
}

Not necessarily the "recommended way", just my way.

[matthiasschaub]

Thanks for your quick answer!
I changed your suggestion to work in the following way:

.leaflet-container {
  height: 600px;
  /* width: 960px; */
  max-width: 100%;
  max-height: 100%;
}

.leaflet-container [role="button"] {
    all : revert;
}

This does remove the style. It removes all styling which I would like to avoid.

Take note of the +/- zoom buttons in the upper left corner.

[matthiasschaub]

A minimal working example showcasing this problem can be found in this repository:
https://github.com/matthiasschaub/pico-map-playground

[matthiasschaub]

I also updated my questions with more details and better example (including a git repository with a minimal working example).