我正在使用進度條Ant Design，我想更改進度條末尾顯示的百分比的文本顏色，因為我的背景顏色是黑色，因此無法看到顯示的百分比（黑色）。我不知道如何更改它，因為沒有更改文本顏色的 API。
這是我的代碼行：
<Progress strokeColor={{'0%': '#eb5c20','100%': '#c6224e'}} percent={90} status='active' />
此進度條位于 a 內div，即使我將其更改css color tag為較淺的顏色，它也無法完成這項作業。
uj5u.com熱心網友回復：
您應該使用類color上的屬性更改文本顏色ant-progress-text。例如，你可以這樣做：
.ant-progress-text {
color: white;
}
您可能不想全域更改所有進度條的顏色，您可以通過使用其父類名稱（類似于.parent-div-classname .ant-progress-text）參考該特定進度條來實作。
或者，您可以className在Progress組件上添加一個屬性以為其分配自定義類，并使用它來應用您的顏色 css 屬性。
uj5u.com熱心網友回復：
HTML
<div class = "progressBar">
<div class = "background">0%</div>
<div class = "container">
<div class = "foreground">0%</div>
</div>
</div>
<button>Play</button>CSS
*:not(button) {
padding: 0;
margin: 0;
border: 0;
box-sizing: border-box;
}
body {
padding: 10px;
}
.progressBar {
width: 150px;
height: 15px;
border: 1px solid #000;
position: relative;
margin-bottom: 5px;
}
.progressBar .background,
.progressBar .foreground {
width: 150px;
height: 13px;
font: normal 10px/13px Sans-Serif;
text-align: center;
}
.progressBar .container {
position: absolute;
top: 0;
left: 0;
width: 0%;
overflow: hidden;
}
.progressBar .foreground {
background-color: navy;
color: yellow;
}JS
$(function() {
$("button").click(function() {
var start = 0;
var interval = setInterval(function() {
if(start >= 100) clearInterval(interval);
$(".progressBar").find(".background, .foreground")
.text(start "%")
.end()
.find(".container")
.css("width", start "%");
}, 10);
});
});轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/330130.html