[英]How to update style element in Ant Design React component using Javascript
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/ .我对 React 很陌生,我正在尝试从 Ant Design - https://ant.design/components/progress/更新
Progress
React 组件的文本颜色。 I checked through the documentation of ant design but did not find any property or attribute for changing the text color.我检查了 ant 设计的文档,但没有找到任何用于更改文本颜色的属性或属性。 On doing inspect element, I found that it is using the css class
.ant-progress-circle.ant-progress-text
.在检查元素时,我发现它使用的是 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
. .ant-progress-circle.ant-progress-text
。
And when Progress is 100% it applies .ant-progress-status-success
style also to the text.当 Progress 为 100% 时,它也会将
.ant-progress-status-success
样式应用于文本。
So to overcome this issue, need to override these styles Inside specific Progress element.所以要克服这个问题,需要覆盖这些 styles 里面特定的 Progress 元素。 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
.这可以通过用
div
包装Progress
并将样式更改应用于此div
内的那些.ant-progress-circle.ant-progress-text
和.ant-progress-status-success
类来实现。
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 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.由此我们可以覆盖该 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.如果要为不同的进度值更改文本颜色,请为每种颜色保留 styles,并在每个值时更改 styles。
for example -- CSS ---例如 -- 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.现在动态改变需要申请的样式class。
<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.检查此示例代码和框,其中包含如何在不同进度值中应用不同文本colors (样式类)的完整演示。
Simplest way to override antd components style is search class from developer tool(inspect element) and override the class.覆盖 antd 组件样式的最简单方法是从开发者工具(检查元素)搜索 class 并覆盖 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
如果您只想覆盖特定元素的样式,只需将包装器添加到组件中 css class 并覆盖样式示例
<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 css 将是
.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我认为更改文本颜色的唯一方法是覆盖
.ant-progress-text
class。检查这个: How to override style of a single instance of a component
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.