How to update style element in Ant Design React component using Javascript

Question

I am quite new to React and I am trying to update the text color of the Progress React component from Ant Design - https://ant.design/components/progress/. I checked through the documentation of ant design but did not find any property or attribute for changing the text color. On doing inspect element, I found that it is using the css class .ant-progress-circle .ant-progress-text. Can anyone tell me how to change the color of component after using it? This is how I am using the component:

<Progress
          style={{
            position: 'absolute',
            top: 50,
            left: 750,
            color: '#C64242',
          }}
          width={155}
          percent={80}
          strokeColor={'#D64242'}
          strokeWidth={12}
          format={() => 'High'}
          type="circle"
        />

I am able to update positions (top, left) of the component, but somehow the color is not getting applied. I am not sure how to tackle this problem!

Can you please elaborate more? I tried like this and it did not work - <div style={{ color: '#D64242'}}> <Progress style={{ position: 'absolute', top: 50, left: 750, color: '#C64242', }} width={155} percent={80} strokeColor={'#D64242'} strokeWidth={12} format={() => 'High'} type="circle" /> </div> — Aditya Bhattacharya
– Aditya Bhattacharya, Commented Apr 23, 2022 at 5:06
@AdityaBhattacharya can you tell what color is not getting applied? strokeColor or color you added via style? — DevThiman
– DevThiman, Commented Apr 23, 2022 at 5:18

DevThiman · Accepted Answer · 2022-04-26 08:17:07Z

There are few style classes that applied to the text in Progress which you identified.

.ant-progress-circle .ant-progress-text.

And when Progress is 100% it applies .ant-progress-status-success style also to the text.

So to overcome this issue, need to override these styles Inside specific Progress element. That can be achieved by wrapping that Progress with a div and apply style changes to those .ant-progress-circle .ant-progress-text and .ant-progress-status-success classes which are inside this div.

Progress Element

{/* Here we wrap the Progress component with 'div' and override the style classes
 (.ant-progress-circle .ant-progress-text) styles provided by antd styles */}
  <div className="progress-div">
    <Progress
      style={{
        position: "absolute",
        top: 100,
        left: 250
      }}
      width={155}
      percent={percent}
      strokeColor={"#D64242"}
      strokeWidth={12}
      format={() => "High"}
      type="circle"
    />
  </div>

CSS

.progress-div .ant-progress-circle .ant-progress-text {
    color: #32a852;
 }

From this we can override the style of text which is inside that div.

If you want to change the text-color for different values of the progress, keep styles for each color and change those styles when each values.

for example -- CSS ---

.progress-low .ant-progress-circle .ant-progress-text {
    color: #32a852;
 }

.progress-mid .ant-progress-circle .ant-progress-text {
    color: #ffbf00;
 }

.progress-high .ant-progress-circle .ant-progress-text {
    color: #c64242;
 }

Now dynamically change the style class that need to apply.

<div className={style}> // dynamic style.
    <Progress
      // attributes
    />
  </div>

check this example codesandbox which have full demo of how to apply different text colors (style-classes) in different progress values.

Siddharth Bagal · Accepted Answer · 2022-04-26 12:44:41Z

Simplest way to override antd components style is search class from developer tool(inspect element) and override the class.

for your example it will be

.ant-progress-text{
color:red !important
}

as a result it will override the style globally. if you want to override the style for specific element only, just add wrapper to the component with css class and override the style example

<div className="parent">
   <Progress
      style={{
        position: "absolute",
        top: 100,
        left: 250
      }}
      width={155}
      percent={percent}
      strokeColor={"#D64242"}
      strokeWidth={12}
      format={() => "High"}
      type="circle"
    />
</div>

and css will be

.parent .ant-progress-text{
    color:red !important
    }

and it will override style of that specific element only

Hesam · Accepted Answer · 2022-04-22 21:36:24Z

1

I think the only way to change the text color is to overwrite .ant-progress-text class. check this: How to override style of a single instance of a component

answered Apr 22, 2022 at 21:36

Hesam

5003 silver badges13 bronze badges

2 Comments

Aditya Bhattacharya Over a year ago

Unfortunately, overriding works at a global level, this way the color of all other components are getting changed. I want to only modify for a specific component, preferably using JavaScript so that I can control it dynamically through code and based on React userState hook .

DevThiman Over a year ago

@Hesam actually .ant-progress-text is a nested style class that is wrapped by .ant-progress-circle. So we need to override both by wrapping with style class which have those override styles. I put an answer check that. :)

Collectives™ on Stack Overflow

How to update style element in Ant Design React component using Javascript

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related