Soy bastante nuevo en React y estoy tratando de actualizar el color del texto del componente Progress React de Ant Design - https://ant.design/components/progress/ . Revisé la documentación del diseño de hormigas pero no encontré ninguna propiedad o atributo para cambiar el color del texto. Al inspeccionar el elemento, descubrí que está usando la clase css .ant-progress-circle .ant-progress-text . ¿Alguien puede decirme cómo cambiar el color del componente después de usarlo? Así es como estoy usando el componente:
<Progress style={{ position: 'absolute', top: 50, left: 750, color: '#C64242', }} width={155} percent={80} strokeColor={'#D64242'} strokeWidth={12} format={() => 'High'} type="circle" />Puedo actualizar las posiciones (superior, izquierda) del componente, pero de alguna manera el color no se aplica. ¡No estoy seguro de cómo abordar este problema!
Hay pocas clases de estilo que se aplicaron al texto en Progreso que identificó.
.ant-progress-circle .ant-progress-text .
Y cuando el Progreso es del 100%, aplica .ant-progress-status-success también al texto.
Entonces, para superar este problema, debe anular estos estilos dentro del elemento de progreso específico. Eso se puede lograr envolviendo ese Progress con un div y aplicando cambios de estilo a esas .ant-progress-circle .ant-progress-text y .ant-progress-status-success que están dentro de este div .
Elemento de progreso
{/* 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; }A partir de esto, podemos anular el estilo de texto que se encuentra dentro de ese div.
Si desea cambiar el color del texto para diferentes valores del progreso, mantenga los estilos para cada color y cambie esos estilos cuando cada valor.
por ejemplo -- 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; }Ahora cambie dinámicamente la clase de estilo que necesita aplicar.
<div className={style}> // dynamic style. <Progress // attributes /> </div>verifique este código y cuadro de ejemplo que tiene una demostración completa de cómo aplicar diferentes colores de texto (clases de estilo) en diferentes valores de progreso.
La forma más sencilla de anular el estilo de los componentes antd es buscar la clase desde la herramienta de desarrollador (elemento de inspección) y anular la clase.
para tu ejemplo será
.ant-progress-text{ color:red !important }como resultado, anulará el estilo globalmente. si desea anular el estilo solo para un elemento específico, simplemente agregue un envoltorio al componente con la clase css y anule el ejemplo de estilo
<div className="parent"> <Progress style={{ position: "absolute", top: 100, left: 250 }} width={155} percent={percent} strokeColor={"#D64242"} strokeWidth={12} format={() => "High"} type="circle" /> </div>y css será
.parent .ant-progress-text{ color:red !important }y anulará el estilo de ese elemento específico solamente
Creo que la única forma de cambiar el color del texto es sobrescribir .ant-progress-text . verifique esto: Cómo anular el estilo de una sola instancia de un componente