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?
2
Answers
You can change the color of the icon within the style argument in the icon component.
For example:
<LeftCircleOutlined style={{ fontSize: 100, color: "blue" }} />
You can see my live demo here
Use
fill
to colour SVGs. The @ant-design/icons SVGs havefill: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.Option 2. Set the
color
of theLeftCircleOutlined
element inline…… or in your stylesheet:
Option 3. Override the SVG’s
fill
in your stylesheet: