无法从React常量获取颜色

Question

我正在使用 Typescript React 和 Tailwind 编写一个管理仪表板，有一个常量文件，并在组件中映射它们。

salesInfoBoxes - 常量导出 SalesInfoBox - 可重复使用的盒子组件

问题： 当使用 SalesInfoBox 组件并从其工作的常量中添加背景时，我在开发工具中看到它，但实际上并未添加颜色

有什么帮助吗？

 {salesInfoBoxes.map((box, index) => (
        <SalesInfoBox
          heading={box.heading}
          qty={box.qty}
          bg={box.bg}
          key={index}
        />
      ))}

const SalesInfoBox = ({
  heading,
  qty,
  bg,
}: {
  heading: string
  qty: number
  bg: string
}) => {
  return (
    <div className="bg-white w-[200px] mx-auto rou-t mb-[30px] rou-b">
      <div className="h-[30px] bg-gray-300 text-center rou-t">{heading}</div>
      <div className={`bg-[${bg}] h-[200px] flex flex-col text-center`}>
        <span className="sctOneNumbers mt-[30px]">{qty}</span>
        <span>Valued</span>
        <span className="bg-[#bbb] py-1 px-2 rou w-fit mx-auto">
          ${qty * 500}
        </span>
      </div>
    </div>
  )
}

export default SalesInfoBox

我不断地从

获取数据

export const salesInfoBoxes = [
  {
    heading: "Not delivered",
    qty: 7,
    bg: "#F0FF96",
  },
  {
    heading: "In cart",
    qty: 170,
    bg: "#F0FF96",
  },
  {
    heading: "Returned",
    qty: 1,
    bg: "#FF9696",
  },
]

我看到我的目录位于 tailwind.config.js 中，我尝试了多种方法来解决问题，但没有任何效果。 预先感谢您！

Answer 1

如果使用内联样式直接应用背景颜色有效，但背景颜色的 Tailwind 动态类无效，则问题可能与您如何结合使用动态类与常量中的变量有关。这是一个潜在的解决方案：

在您的

SalesInfoBox

组件中，不要尝试在模板文字中使用动态类，而是直接在 JSX 代码中使用内联样式应用背景颜色：

const SalesInfoBox = ({
  heading,
  qty,
  bg,
}: {
  heading: string
  qty: number
  bg: string
}) => {
  const boxStyle = {
    backgroundColor: bg, // Use the provided background color directly
  };

  return (
    <div className="bg-white w-[200px] mx-auto rou-t mb-[30px] rou-b">
      <div className="h-[30px] bg-gray-300 text-center rou-t">{heading}</div>
      <div style={boxStyle} className="h-[200px] flex flex-col text-center">
        <span className="sctOneNumbers mt-[30px]">{qty}</span>
        <span>Valued</span>
        <span className="bg-[#bbb] py-1 px-2 rou w-fit mx-auto">
          ${qty * 500}
        </span>
      </div>
    </div>
  );
}

export default SalesInfoBox;

通过以这种方式使用内联样式，您可以确保背景颜色直接应用于元素，从而绕过 Tailwind 处理动态类的任何潜在问题。 但是，如果您更喜欢使用 Tailwind 类，请确保常量 (

bg

) 中的颜色值格式正确。它们应该是有效的 CSS 颜色值。如果问题仍然存在，请仔细检查您的 Tailwind 配置，以确保按预期生成颜色类。有时，某些配置或插件可能会影响动态类的生成方式。