Overriding color styles for icon from antd does not work

Issue

I have global styles: global.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Inter, sans-serif;
    color: #fff;
}

Next, I use the icon from antd and style it.

import cl from './Dish.module.css'
import { LeftCircleOutlined } from '@ant-design/icons'

<div className={cl.imageBox}>
   <LeftCircleOutlined className={cl.rotateLeftIcon}  />
</div>

and the corresponding styles for the icon:

.imageBox {
    position: relative;
}
.rotateLeftIcon {
    color: rgb(239, 3, 3) !important;
    position: absolute;
    font-size: 44px;

    left: 0;
    top: 46%;
}

The !important; note here should override the style, indicating that this is the highest style in the style hierarchy, so it should be set, but no, for some reason the styles from global.css are applied.

I've tried specifying a more specific selector like

.rotateLeftIcon  svg{
    color: rgb(239, 3, 3) !important;
    position: absolute;
    font-size: 44px;

    left: 0;
    top: 46%;
}

in this case in developer mode, indeed, the style with red color went higher in the hierarchy, and the style with white color even started to show crossed out, but it still shows it in white color, what could be the problem?

Solution

Use fill to colour SVGs. The @ant-design/icons SVGs have fill:currentColor; to make them inherit from the text colour of their parent. So any one of the following will set the SVG's colour:

Option 1. Set the color of the container.

<div className={cl.imageBox} style={{color:"rgb(239, 3, 3)"}}>
   <LeftCircleOutlined className={cl.rotateLeftIcon} />
</div>

Option 2. Set the color of the LeftCircleOutlined element inline...

<div className={cl.imageBox}>
   <LeftCircleOutlined className={cl.rotateLeftIcon} style={{color:"rgb(239, 3, 3)" }} />>
</div>

... or in your stylesheet:

.rotateLeftIcon {
    color: rgb(239, 3, 3);
}

Option 3. Override the SVG's fill in your stylesheet:

.rotateLeftIcon svg {
    fill: rgb(239, 3, 3);
}

Answered By - Moob