Question 284723 in Html Question posted in
Some basic documentation can be found here.

Html – Overriding color styles for icon from antd does not work

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?

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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);
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search