Illustrating my issue in a straightforward manner
import {BsFillArrowRightCircleFill} from "react-icons/bs";
export default function Icon(){
return <BsFillArrowRightCircleFill className='icon'/>;
}
When I include the following CSS rule in my file:
.icon {
color: red;
}
everything functions as expected. However, if I introduce a global style like this:
* {
color: yellow;
}
.icon {
color: red;
}
the color remains yellow instead of turning red. The reasoning behind this selector's behavior eludes me.