'css can't override react icon color

A simple illustration of my problem

import {BsFillArrowRightCircleFill} from "react-icons/bs";

export default function Icon(){
    return <BsFillArrowRightCircleFill className='icon'/>;
}

In the CSS file, if I put

.icon {
   color: red;
}

it would work fine. But if I add a global style like this

* {
   color: yellow;
}
.icon {
   color: red;
}

then the color would stay yellow. I can't figure out why this selector doesn't work.

cssselectorreact-icons


Solution 1:[1]

Try Using the selector as:

    .icon{
          *{
             color: red;
           }
        }

Also visit this link and you'll learn more about it. How to Style React-Icons

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Rafia Zafar

Related Questions