如何通过Props与Tailwind CSS修改SVG组件的填充色？

你的问题和NextJS、NextUI无关，核心是SVG的fill属性继承规则、优先级问题，以及组件类名的处理方式。以下是具体原因和解决方案：

1. 核心原因：SVG内部元素的内联fill属性覆盖类样式 #

通过SVGR生成的SVG组件，内部的<path>、<circle>等元素大概率自带内联fill属性（比如fill="#xxxxxx"）。内联属性的优先级高于CSS类选择器，所以即便给<svg>标签添加了fill-white类，内部子元素的内联fill也会优先生效，导致填充色不改变。

2. 解决方案 #

方案一：移除内部元素的内联fill属性 #

打开SVG代码，删除所有子元素（如<path>）上的fill属性。此时<svg>标签的fill-white类会被内部元素继承，填充色即可正常生效。

方案二：使用fill-current配合文本颜色类 #

Tailwind的fill-current类可让SVG填充色继承父元素的color属性，你可以通过文本颜色类控制填充色：

• 修改组件内部类名：

  const UserLogo = (props: SVGProps<SVGSVGElement>) => (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      xmlSpace="preserve"
      viewBox="0 0 1087 780"
      className="fill-current"
    >
      ...
    </svg>
  )
  

• 使用组件时直接传递文本颜色类：

  <UserLogo className="text-white border border-white" />
  

方案三：合并组件内部与外部类名（避免覆盖） #

当前组件写法中，<svg>先展开{...props}再写className="fill-white"，会导致用户传递的className被内部类名覆盖（React中后定义的属性会覆盖先展开的）。你可以用clsx工具合并类名，确保内部默认类和用户传递的类同时生效：

1. 安装依赖：

   npm install clsx
   

2. 修改组件：

   import { clsx } from 'clsx';
   import type { SVGProps } from 'react';
   
   const UserLogo = ({ className, ...props }: SVGProps<SVGSVGElement>) => (
     <svg
       {...props}
       xmlns="http://www.w3.org/2000/svg"
       xmlSpace="preserve"
       viewBox="0 0 1087 780"
       className={clsx('fill-white', className)}
     >
       ...
     </svg>
   )
   export default UserLogo;
   

这样用户传递的border border-white会和内部的fill-white合并生效，同时如果内部元素没有内联fill，填充色也会正常显示。

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