0

i've a JSX module(card.jsx) which is call in another component to create 5 instances of this module(card.jsx).

import card.css
...
 <div className='cistern'>
        <div className="shape">
          <div className="wave"></div>
        </div>
      </div>

in my card.css, i have a custom property call filled.

.wave {
    position: absolute;
    --filled: 20%;

in my card.jsx i try to set different value for the css custom variable "filled".

 React.useEffect(() => {
  var cisternProperty =  document.querySelector( '.wave' )
  cisternProperty.style.setProperty('--filled', showFilledRoundString)
  console.log('show Tank Level', showFilledRoundString)
 }, [])

only the first instance use the new value, all other instance used the default "filled" value set in the css file. what's happening? what could be the workaround? thanks

Egom
  • 1
  • 1
  • 1
  • `cisternProperty.style.setProperty` will only set that property on the first element due to using `document.querySelector`. It does not apply the property to the css class. – evolutionxbox Jan 07 '22 at 13:51
  • You may have to overwrite the class by creating a new style element. https://stackoverflow.com/questions/1212500/create-a-css-rule-class-with-jquery-at-runtime – evolutionxbox Jan 07 '22 at 13:53
  • You either have to write the property for every instance of cisternProperty (use quesrySelectorAll to get all waves) or set the property not within the wave class but in some ancestor that is common to them all. – A Haworth Jan 07 '22 at 14:47
  • @AHaworth could you elaborate a bit more the querySelectorAll alternative? thanks – Egom Jan 07 '22 at 15:46

1 Answers1

2

To change the CSS property for every instance of an element in the .wave class you can either change the property in some common ancestor element rather than in the .wave elements themselves or you can go through all the .wave elements change their property.

So instead of using querySelector, which gives you only the first element in that class, use querySelectorAll which gives you a collection of all the elements in that class. You can then loop through them setting the CSS variable individually for each one:

  var cisternProperties =  document.querySelectorAll( '.wave' );
  cisternProperties.forEach( cisternProperty => {
    cisternProperty.style.setProperty('--filled', showFilledRoundString);
  });
A Haworth
  • 30,908
  • 4
  • 11
  • 14