Question 279449 in Html Question posted in
Some basic documentation can be found here.

Html – Cant figure out how to pass values to CSS variables from a functional component in reactjs?

I found a html page with flower animations in it and trying to use it in my react app but I am not able to I think I am not able to properly pass the value to the custom css variables.

In html it is done like
<div class="grow-ans" style="--d:4s"></div>

in react I tried this :
<div className="grow-ans" style={{'--d':'4s'}}></div>
but it is not working.

I cant find anything else anywhere. Please help.

this is the code I am trying to convert into react component.
https://github.com/jeycaarce/flowers

Tags:

2

Answers


  1. 0

    To pass values to CSS variables from a functional component in React, you’re on the right track by setting the CSS variable using the style prop. However, there are a couple of things you need to keep in mind:

    1. React uses camelCase for style property names. Therefore, you should use camelCase for CSS variable names as well.

    2. You need to make sure that the CSS variable is used within your CSS or in a styled component for it to take effect.

    in jsx use this

    const customStyles = {
    '--d': '4s',
  };

<div className="grow-ans" style={customStyles}>
      Content
    </div>

    in CSS try this

    .grow-ans {
  animation: grow var(--d) linear;
}
    Login or Signup to reply.
  2. 0

    try to use the same classNames and the same css folder into a component

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search