Font-weight on currentValueText
RobertGordonO4 opened this issue · comments
Hi,
I realize this is a pretty minor thing but after deciding to use your component in a company project we would really like to be able to change the pre-defined font-weight value on currentValueText. (if it was purely my decision i'd probably just go with the default bold)
Right now that value is set via a style="font-weight: bold;" on the text element for current value ->but since that is rendered into element.style it's impossible to just override the value for font-weight by adding a custom css class onto the speedometer (containing font-weight: !important).
Is there another way to change/override this default font-weight value? Or maybe just clear the setting altogether?
Please if that isn't possible could you find some time to add a new prop valueTextFontWeight (similiar to already existing valueTextFontSize and textColor) within your next release? Possibly just removing the default setting would make the font-weight customizable through a custom css class.
Many thanks for your time
@RobertGordonO4 Thanks for your input. valueTextFontWeight makes sense. I will update this issue once this new prop is added.
Thanks, appreciate it
@RobertGordonO4 valueTextFontWeight prop is released in v1.7.0
Sandbox reference - https://codesandbox.io/s/competent-grothendieck-73cz8?file=/src/App.vue
Please update to v1.7.0 to use this new config. Please reopen this issue if you face any issues.
@RobertGordonO4 I was fiddling with tweaking styles with css. I was able to override the styles with css using the important attribute.
Sample Sandbox reference - https://codesandbox.io/s/reverent-tree-hjr56?file=/src/App.vue
Maybe you can try this if you would like to tweak any other styles with css in future.
@palerdot Huh, you're right.. looking at it now it does get overridden by using the .speedometer .current-value classes provided in the component.
What I was doing before was wrapping the whole component in an additional div with a custom class and adding the css styles with important to that class. Not sure why I didn't just use the hardcoded classes from the component in the first place, also for some reason I thought that css styles coded directly into elements via the style="css content" method have primeness even over the importants. Well, I'll know better next time.
Nevertheless, I already managed to implement it in the new 1.7.0 version without any issues.
So thanks for the advice but mostly for getting to it so quickly
No problems ...