SVG fill not updating
I am trying to make my last star color gray. I have selected and written the style but its simply not applying. How can I fix?
That start svg
Please help me
18 Replies
First off, get rid of
!important and never use it again. It's a cancer that will infest your CSS files until everything is !important as you're trying to override other "important" things. Pretend it doesn't exist and your life will be better off, trust me.
For the star issue, give me a few minutes to play around and see what I can figure out
I'm 90% sure that you need the SVG to be inlined and not linked to modify it via CSS.
So you could either inline all the stars or make a second star with the right colour and link that one.Correct it needs to be the SVG element to modify not a img
Thanks for the confirmation, good sir! Thought I was going crazy lol
Best trick is to use custom props with a currentColor fallback imo
Alright
Done sir!
Just to make sure, I ran Vite and Scss watch multiple times, deleted cache but still problem persists.
The latter sounds great
I wish I could do this project in JSX/TSX and Tailwind. But my client asked for raw html, css and Bootstrap...Can't express my disgust in words
Raw CSS or Bootstrap? Can't do both :p
Both :]
Along with Sass
If you're using BS, you're not…yeah, none of that is "raw CSS"
They are modifying parts of Bootstrap
Using Sass
SASS isn't CSS. BS isn't raw CSS, it's a design lib
Ahh I see.
Anyways thanks all for the help
I will go make a new svg
i recommend that you use svg symbols and use
currentColor for the fillThat solves none of this issue
JSX is horrible imo and not a fan of Tailwind
it doesn't, but after the fixes, it adds a little bit of ease
Styling a meter element with CSS and SVG
How to make a fancy rating component.
Why do you not like JSX?
I can't speak for b1, but to me JSX is to HTML what Tailwind is to CSS: it's JavaScript for those afraid of learning how the front-end works. There are many different ways to create HTML in JS that lets you customize the element(s) made before adding them to the DOM that uses the actual HTML syntax. JSX requires you to write almost-HTML due to JS keywords being reserved—like you can't do
<div class="container"> b/c class is a reserverd word! So you need to do className.
And you need to enclose it all in one element to return because…why? They even give syntax for "we know this rule is dumb but we can't change it so here's a crutch".
Or you could just write a string and do parentElement.innerHTML. Or document.createElement() and customize it like normal, then parentElement.appendChild(). The functionality that JSX provides already exists. And isn't tied specifically to React.i also can't speak for b1mind, but jsx is a weak version of e4x, but for html and way less integrated into js
the last point applied to e4x, and it just died due to lack of interest and some big security holes
jsx doesn't seem to have security holes, but the god awful code that people write is just sad
i love the trenary operator, but react people just use the living crap out of it for jsx
and then when you mix typescript and get tsx, the code starts to look like butchered c++ meta programming