How do I draw a border along the shape of a Geography component?

[wbigert]

I want to add maybe a 1px black border along every region of a country or every country, right now it's just white/transparent in-between. I am styling my Geography components likes this: .geo-municipalities { fill: rgb(180, 180, 180); outline: none; } What can I do to change/add the region border/outline color/width (not rectangle, but along the shape)?

[jonasschultheiss]

I don't understand how you currently style your component. But that doesn't mean that it's wrong. I wanted to do the same and found this issue through a google search.

After that I found this article. He draws a map of the USA with borders.

He did it like this:

<Geographies  geography='/gadm36_USA.json'>  <---- FILEPATH TO YOUR 
  {(geographies, projection) =>                  TOPOJSON FROM ROOT
    geographies.map((geography, i) =>
     <Geography
       key={i}
       geography={geography}
       projection={projection}
       style={{
         default: {
            fill: "#ECEFF1",
            stroke: "#607D8B",
            strokeWidth: 0.75,
            outline: "none",
         },
         hover: {
            fill: "#CFD8DC",
            stroke: "#607D8B",
            strokeWidth: 1,
            outline: "none",
         },
         pressed: {
            fill: "#FF5722",
            stroke: "#607D8B",
            strokeWidth: 1,
            outline: "none",
         }
      }}
    />
   )
  }
</ Geographies>

My own solution is the following:

        <Geographies geography={geoUrl}>
          {({ geographies }) =>
            geographies.map(geo => {
              return (
                <Geography
                  key={geo.rsmKey}
                  geography={geo}
                  fill="#E4E5E6"
                  stroke="#232323"
                  strokeWidth="0.3"
                  className="focus:outline-none"
                />
              );
            })
          }
        </Geographies>