Circular Progressbar Text color is not setting properly about react-circular-progressbar

[kevinsqi]

Because <text> is an svg element, you should use fill instead of color. Take a look at the default stylesheet to see how to get started, and you can modify from there: https://github.com/iqnivek/react-circular-progressbar/blob/master/src/styles.css#L27

[boriskogan81]

I don't mean to be a pain in the ass, but fill doesn't work either-something is overriding it, even when I mark it as !important.

[kevinsqi]

Can you verify that this example works for you and has colored text? https://codesandbox.io/s/vymm4oln6y

If it does work, then take a look at what you might be configuring differently. If the color's being overridden, you should be able to see what's overriding it in developer tools. Otherwise, please post the code you're using.

[boriskogan81]

Fails with error g.testRunner.reportError is not a function.

I can't see anything overriding the color.

My code:

			<div
				className="ml-0 mr-0 pl-0 pr-0 d-flex flex-column  align-items-center "
				style={{
					height: '22vh',
					maxHeight: '22vh',
					minWidth: '20vh',
					fill: '#606A7B'
				}}>
				<CircularProgressbar
					className={classes}
					percentage={percentage}
					textForPercentage={textForPercentage}
					counterClockwise={counterClockwise}
					style={{ minWidth: '20vh' }}
					initialAnimation={true}
				/>
				<span className="text-center">{subhead}</span>
			</div>

.CircularProgressbar .CircularProgressbar-text {
	font-size: 1rem;
	dominant-baseline: middle;
	text-anchor: middle;
	fill: '#606A7B' !important;
}

[kevinsqi]

So codesandbox.io doesn't work for you at all? What browser version / OS are you on?

[boriskogan81]

Now it works, and yes, text is colored.