I'm experiencing an issue where the pointer property is working, but the fill property isn't having any effect. When I inspect the elements in the browser console, I can manually change the element.style to affect the styling of the SVG component.
Even after trying to override with !important next to the fill property in the element.style, the issue still persists.
//React file
//Import statement
import { ReactComponent as Dot } from './dot.svg';
//Code snippet
<div className="home">
<Dot className="dotSvg"/>
<h3>Home</h3>
</div>
//CSS file and container wrapper
.container{
display: grid;
text-align: center;
grid-template-columns: auto auto auto auto auto;
position: sticky;
top: 0;
}
.dotSvg{
cursor: pointer;
fill: #5AE2EB;
}
///Contents of dot.svg
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 2 2" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><circle cx="1" cy="1" r="1" style="fill-opacity:0;"/></svg>
The main goal is to successfully apply the fill property to style the SVG component.