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!
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.
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
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