Custom the SVG map color by edit the CSS

[rizquuula]

I am a bit confused to change the color. And then I try to find the CSS file that control the color. And here it is.

.svg-map {
  width: 100%;
  height: auto;
  stroke: #666;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round; }
  .svg-map__location {
    fill: #a1d99b;
    cursor: pointer; }
    .svg-map__location:focus, .svg-map__location:hover {
      fill: #b8e2b3;
      outline: 0; }
    .svg-map__location[aria-checked=true] {
      fill: #f4bc44; }

I just want to say to everyone who need to modify the CSS, this is the default.

Instead of using default import "react-svg-map/lib/index.css"; You can save your custom CSS.

It will really helps if there is a way to custom the color easier.

[VictorCazanave]

Thanks for your comment @eiproject!

I am a bit confused to change the color. And then I try to find the CSS file that control the color.
I just want to say to everyone who need to modify the CSS, this is the default.

Actually this is already documented: "Optionally, import react-svg-map/lib/index.css if you want to apply the default styles".

Instead of using default import "react-svg-map/lib/index.css"; You can save your custom CSS.

It's obvious to me that if you don't want to use the default styles, you can import your custom CSS.
However, I'll add it in the documentation to be more clear.

It will really helps if there is a way to custom the color easier.

I agree that it would be more convenient and I thought about using CSS variables, but they aren't supported by the older browsers, or SCSS variables, but it seemed over-engineered to me (I may reconsider it 🤔).
This project provides simple components with a limited amount of CSS, then the default styles are kinda given as an example and people can easily create their own styles.

[rizquuula]

Yes, thank you for the awesome project. I love it so much!