Hay una barra de progreso circular. Esta barra imprime el número de días restantes, tomando la diferencia de días. Pero tengo problemas para ajustar la posición de esta barra.

estoy tratando de hacer;

Lo que he podido hacer hasta ahora;

html

 <div className={'circularremainingtime__container only-desktop' + circularColor}> <div className="remainingday"> <p>{endDate.getDate()}</p> <p>{endDateMonth}</p> </div> <AS.CircularProgress className="circularprogress" style={style} variant="determinate" value={persentage} thickness={3} /> <p>{circularText}</p> </div>

CSS

 .circularremainingtime__container.only-desktop { width: 110px; display: flex; flex-direction: column; align-items: center; padding-left: 1.5em; & > p { margin: 0; font-weight: 600; margin-top: 0.5em; font-size: 1.2rem; font-weight: 500; color: var(--palette-red-300); } & > div { padding: var(--padding); } .circularprogress { color: var(--palette-red-300); } .remainingday { //position: absolute; color: #004dcf !important; padding-top: 5px; p{ margin: 0; text-align: center; color: #004dcf !important; font-size: 8px; font-weight: bolder; } p:first-child{ font-size: 13px; text-align: center; } } }

Cuando configuro la clase de día restante en absoluto, puedo obtener la imagen que quiero. Pero cuando deslizo la pantalla, las fechas no cambian en absoluto. Por eso comenté esa línea.