How can I use dynamic css variables in react?

May 25, 2022

Trying to do a drop-shadow hover effect in react. I thought I’d use inline style attribute so each icon can have a different color when it’s hovered over. I’m stuck on how to achieve this. In my IconGrid component I’ve created an array of objects, each has an image and the image color respectively. Then I map through it and return the individual GridItem component, but I’m stuck as to how I can use the unique color property for the css drop-shadow effect. I’m getting the red lines in my GridItem component because it’s clearly not the written correctly. How can I achieve this?

IconGrid Component

import React from "react";
import "./index.scss";
import GridItem from "./GridItem";
import XD from "../../../assets/images/adobe-xd.png";
import PS from "../../../assets/images/adobe-photoshop.png";
import AI from "../../../assets/images/adobe-illustrator.png";
import CSS from "../../../assets/images/css.png";
import GSAP from "../../../assets/images/gsap.png";
import GULP from "../../../assets/images/gulp.png";
import HTML from "../../../assets/images/html.png";
import JS from "../../../assets/images/javascript.png";
import NODE from "../../../assets/images/nodejs.png";
import REACT from "../../../assets/images/react.png";
import WP from "../../../assets/images/wordpress.png";
import PHP from "../../../assets/images/php.png";

const IconGrid = () => {
  const icons = [
    { img: XD, color: "#2E001E" },
    { img: PS, color: "#31C5F0" },
    { img: AI, color: "#FF7F18" },
    { img: HTML, color: "#E44D26" },
    { img: CSS, color: "#264DE4" },
    { img: WP, color: "#01579B" },
    { img: PHP, color: "#6181B6" },
    { img: JS, color: "#F7DF1E" },
    { img: GSAP, color: "#8AC640" },
    { img: GULP, color: "#D34A47" },
    { img: NODE, color: "#83CD29" },
    { img: REACT, color: "#61DBFB" },
  ];
  return (
    <>
      <div className="flex-grid">
        {icons.map((icon, idX) => (
          <GridItem key={idX} icon={icon} />
        ))}
      </div>
    </>
  );
};

GridItem Component

import React from "react";
import "./index.scss"

const GridItem = ({ icon }) => {
  return (
  <div style={{`--color: ${icon.color}`}} className="flex-item">
    <img src={icon.img} alt="" />
  </div>
  );
};

export default GridItem;

And the CSS

.flex-item {
  flex-basis: 22.5%;
  padding: 2.5rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease-in-out;
  position: relative;
  &:hover {
    transition: all 0.4s ease-in-out;
    filter: drop-shadow(0 0 20px var(--color)) drop-shadow(0 0 40px var(--color))
      drop-shadow(0 0 60px var(--color));
  }

  img {
    max-width: 80px;
    height: auto;
  }
}

>Solution :

I think you should set your inline style as below, keeping the key: value form.

import React from "react";
import "./index.scss"

const GridItem = ({ icon }) => {
  return (
  <div style={{'--color': `${icon.color}`}} className="flex-item">
    <img src={icon.img} alt="" />
  </div>
  );
};

export default GridItem;