Next.js中SVG path填充色通过Props传递不生效问题

问题描述 #

我在Next.js中开发了一个Divider组件，通过props传递topColor和bottomColor两个颜色值：SVG的背景色（对应bottomColor）可正常生效，但path的填充色（对应topColor）无法生效。

组件代码：

export default function Divider({
  topColor,
  bottomColor,
}: {
  topColor: string;
  bottomColor: string;
}) {
  return (
    <svg
      data-name="Layer 1"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 1200 120"
      preserveAspectRatio="none"
      className={`bg-${bottomColor}`}
    >
      <path
        d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"
        className={`fill-${topColor}`}
      ></path>
    </svg>
  );
}

调用方式：

<Divider topColor="cyan-950" bottomColor="slate-50" />

开发者工具中能看到path已应用class="fill-cyan-950"类，但实际显示为黑色而非预期的深蓝绿色；若直接在代码中硬编码填充色（如fill="#083344"）则可正常工作。

原因与解决方法 #

核心原因 #

Tailwind默认只会扫描代码中明确写出的完整类名，动态拼接的fill-${topColor}这种格式无法被Tailwind的静态分析工具识别，因此不会生成对应的CSS样式。而bg-${bottomColor}生效大概率是因为项目其他地方用到了同类格式的bg类，被Tailwind意外检测到。

解决方案1：传递完整Tailwind类名 #

直接传入完整的类名，避免动态拼接：

// 组件修改
export default function Divider({
  topColor,
  bottomColor,
}: {
  topColor: string;
  bottomColor: string;
}) {
  return (
    <svg
      data-name="Layer 1"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 1200 120"
      preserveAspectRatio="none"
      className={bottomColor}
    >
      <path
        d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"
        className={topColor}
      ></path>
    </svg>
  );
}

// 调用修改
<Divider topColor="fill-cyan-950" bottomColor="bg-slate-50" />

解决方案2：配置Tailwind安全列表 #

在tailwind.config.js中添加safelist，强制生成指定规则的fill类：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  safelist: [
    {
      pattern: /fill-(cyan|slate)-\d{3}/, // 根据实际使用的颜色前缀和数值调整规则
    },
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

解决方案3：直接使用style属性 #

如果需要传递具体颜色值而非Tailwind类名，可直接通过style属性设置：

// 组件修改
export default function Divider({
  topColor,
  bottomColor,
}: {
  topColor: string; // 传入具体颜色值，如"#083344"或"rgb(8, 51, 68)"
  bottomColor: string;
}) {
  return (
    <svg
      data-name="Layer 1"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 1200 120"
      preserveAspectRatio="none"
      style={{ backgroundColor: bottomColor }}
    >
      <path
        d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"
        style={{ fill: topColor }}
      ></path>
    </svg>
  );
}

// 调用修改
<Divider topColor="#083344" bottomColor="#f8fafc" />

内容的提问来源于stack exchange，提问作者Gujana