我在从父节点向子节点发送数据时遇到问题。我想发送有关颜色的信息，然后使用该颜色改变顺风背景。
父组件：

import PlanetInfo from "../components/PlanetInfo";
import data from "../data/data.json";

const HomePage = () => {
  const dataPlanet = data.find((data) => data.name.toLowerCase() === "mercury");
  const color = "#419EBB";

  return (
    <div>
      <PlanetInfo data={dataPlanet} colorContentactive={color} />
    </div>
  );
};

export default HomePage;

我将其发送到PlanetInfo，当我通过console.log检查此组件中的color时，我会获得有关此内容的信息。

import React, { useEffect, useState } from "react";

const PlanetInfo = ({ data, colorContentactive }) => {
  const [planetContentActive, setPlanetContentActive] = useState("overview");

  let sourcePlanet;
  if (planetContentActive === "overview") sourcePlanet = data.images.planet;
  else if (planetContentActive === "structure")
    sourcePlanet = data.images.internal;
  else sourcePlanet = data.images.geology;

  const contentActive = `before:absolute  before:bottom-0 before:h-[4px] before:w-full before:bg-[${colorContentactive}]`;
  console.log(colorContentactive);
  return (
    <main>
      <div className=" border-b border-white/20 font-['spartan league'] tracking-[2px] font-bold text-[9px] h-[50px] flex uppercase text-white px-6 gap-11 justify-center items-center">
        <div
          onClick={() => setPlanetContentActive("overview")}
          className={`relative ${
            planetContentActive === "overview" ? contentActive : ""
          } cursor-pointer h-full flex justify-center items-center`}
        >
          <h3>overview</h3>
        </div>
        <div
          onClick={() => setPlanetContentActive("structure")}
          className={`relative
            ${
              planetContentActive === "structure" ? contentActive : ""
            } cursor-pointer h-full flex justify-center items-center`}
        >
          <h3>structure</h3>
        </div>

        <div
          onClick={() => setPlanetContentActive("surface")}
          className={`relative
            ${
              planetContentActive === "surface" ? contentActive : ""
            } +  cursor-pointer h-full flex justify-center items-center`}
        >
          <h3>surface</h3>
        </div>
      </div>
      <div className=" my-24">
        <img
          src={`.${sourcePlanet}`}
          className=" h-[111px] w-[111px] mx-auto"
        />
      </div>
    </main>
  );
};

export default PlanetInfo;

但是我在变量中使用了color，它不工作了const contentActive =before:absolute before:bottom-0 before:h-[4px] before:w-full before:bg-[${colorContentactive}];
我想在按钮处于活动状态时创建下划线。如果我用f.ex. style={{ backgroundColor: colorContentactive }}它在这个组件中工作，但我不能在此之前将其发送到类。
代码在我看来是可以的，因为它的工作，如果我手动把颜色在这之前像"before:bg-[#419EBB]"。