CODEWITHSUNDEEP
cssreactjs
Hadi Zouhbi
Hadi Zouhbi

Reputation: 203

How to fix "Style prop value must be an object" in this situation (React.js & CSS)

Basically I am using module.css in react and whenever I put the line

<span style="--i:1;"><img src="https://i.postimg.cc/BQcRL38F/pexels-photo-761963.jpg" alt="not found" /></span>

I get an error for the style part. I am a bit new to this, any idea how to make it work?

This is my gallery.module.css

.scope {
    position: relative;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    animation: slid 30s linear infinite;
  }
  
  .scope span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: center;
    transform-style: preserve-3d;
    transform: rotateY(calc(var(--i) * 45deg)) translateZ(350px);
  }
  .scope span img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: cover;
    transition: 2s;
  }
  .scope span:hover img {
    transform: translateY(-50px) scale(1.7);
  }
  @keyframes slid {
    0% {
      transform: perspective(1000px) rotateY(0deg);
    }
    100% {
      transform: perspective(1000px) rotateY(360deg);
    }
  }

And this is the gallery.js

<div className={styles.scope}>
                <span style="--i:1;"><img src="https://i.postimg.cc/BQcRL38F/pexels-photo-761963.jpg" alt="not found" /></span>
                <span style="--i:2;"><img src="https://i.postimg.cc/1RWVB11x/pexels-photo-941693.jpg" alt="not found" /></span>
                <span style="--i:3;"><img src="https://i.postimg.cc/CMfHRKfP/woman-2003647-960-720.jpg" alt="not found" /></span>
                <span style="--i:4;"><img src="https://i.postimg.cc/T1rDCpVT/beautiful-1274056-960-720.jpg" alt="not found" /></span>
                <span style="--i:5;"><img src="https://i.postimg.cc/SNf99YQr/woman-1807533-960-720.jpg" alt="not found" /></span>
                <span style="--i:6;"><img src="https://i.postimg.cc/2SHBcpZL/pexels-photo-4664520.jpg" alt="not found" /></span>
                <span style="--i:7;"><img src="https://i.postimg.cc/CxBzNcjw/Opera-Snapshot-2020-07-03-162022-www-freepik-com.png" alt="not found" /></span>
                <span style="--i:8;"><img src="https://i.postimg.cc/0QckxSpt/Opera-Snapshot-2020-07-03-161422-www-freepik-com.png" alt="not found" /></span>
</div>

Whenever I add styles="--i:1" or any other style there it gives me the error Style prop value must be an object

I am new to react so I have no idea how to make it work.

Upvotes: 0

Views: 1247

Answers (1)

saleh
saleh

Reputation: 347

In JSX when you want to pass value for style attribute, you have to use object type value instead of string, like this:

<span style={{ fontSize: "var(--i)" }}><img src="https://i.postimg.cc/BQcRL38F/pexels-photo- 
761963.jpg" alt="not found" /></span>

And you should probably say why I've used 2 braces.. the first brace is for coding javascript inside jsx and the second one is the object that we want to style our element.

here is a source to learn more about it

Upvotes: 1

Related Questions