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

Html – How to use a variable or a –i:0 property on inline style ReactJS?

This question was asked before but was never fully answered in textThe variables are probably the most important part of this code as I want to be able to use them in multiple CSS functions to animate them with hover effects. I have the html equivalent which is this


    <html lang="en">
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Document</title>
    </head>
    <body>
      <div class="container">
        <div class="card" style="--i:-1" ></div>
        <div class="card" style="--i:0"></div>
        <div class="card" style="--i:1"></div>
      </div>
    </body>
    </html>
    

export default Project

I want my code to be able to do the same thing in a React inline style JSX/JS file. So far all I’ve come to is this:

import './project.css';
const numbers = [-1,0,1]
var r = document.querySelector(':root');
const Project = () => {
    return( 
    <html lang="en">
    <head>
      <meta charSet="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Document</title>
    </head>
    <body>
      <div className="container">
      {numbers.map((num) => (<div key={num} className="card" {...r.style.setProperty('--i', -1)}></div>))}

      </div>
    </body>
    </html>
    )
}

export default Project

however this unfortunately only uses the last value in the list (being 1) and uses this value for all functions in the CSS file.

Tags:

2

Answers


  1. 0

    Based on the link you posted, I think what you’re trying to achieve is setting a CSS variable in the style prop for a JSX Element.

    You can do so like this:

    const SomeComponent = () => (
  <div 
    style={{
      "--i": -1
    }}
  >
    <div
      style={{
        // rotate with some arbitrary calculation using the `--i` CSS variable
        transform: "rotate(calc(360deg / 8 * (var(--i) - 10)))",
        width: "100px",
        height: "100px",
        backgroundColor: "magenta"
      }}
    />
  </div>
)

    I created a Code Sandbox that shows this in action where the value for --i comes from some array of whatever length. The --i value is then used as a part of the background color and transform CSS props for a div. The screenshot below shows the resulting UI for an array of 20.

    Note: This example uses Material UI so you won’t be able to copy/paste from the Code Sandbox. You will have to change the sx prop to style if you want to reuse the code.

    Hope this helps!

    enter image description here

    Login or Signup to reply.
  2. 0

    Test this:

           <body>
        <div className="container">
          {numbers.map((num) => (
            <div key={num} className="card" style={{ "--i": num }}></div>
          ))}
        </div>
      </body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search