如何在反应中使用动态 css 变量？

Question

尝试在 React 中做一个投影悬停效果。我想我会使用内联样式属性，这样每个图标在悬停时都可以有不同的颜色。我坚持如何实现这一目标。在我的 IconGrid 组件中，我创建了一个对象数组，每个对象分别有一个图像和图像颜色。然后我通过它和 return 单独的 GridItem 组件进行映射，但我仍然不知道如何使用独特的颜色属性来实现 css 阴影效果。我的 GridItem 组件中出现了红线，因为它显然没有正确书写。我怎样才能做到这一点？

IconGrid 组件

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 组件

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;

还有 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;
  }
}

Answer 1

我认为您应该将内联样式设置为如下所示，保持 key: value 形式。

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;

如何在反应中使用动态 css 变量？

How can I use dynamic css variables in react?

javascript

css

inline-styles

reactjs