Next.js项目中React-loader-spinner组件颜色无法修改的解决方法

• 检查组件版本并使用对应属性
  不同版本的React-loader-spinner API可能存在差异，若使用v5及以上版本，尝试将原color属性替换为strokeColor——这是RotatingLines专门用于设置线条颜色的属性：

  <RotatingLines
      visible={true}
      height="36"
      width="36"
      strokeColor="#fff"
      strokeWidth="5"
      animationDuration="0.75"
      ariaLabel="rotating-lines-loading"
  />
  

• 强制覆盖内联样式优先级
  组件内部可能通过内联样式锁定了默认颜色，导致自定义样式失效。可以在全局CSS文件（如globals.css）中添加带!important的样式：

  .rotating-lines-custom stroke {
      stroke: #fff !important;
  }
  

  然后给组件的wrapperClass指定该类名：

  <RotatingLines
      visible={true}
      height="36"
      width="36"
      strokeWidth="5"
      animationDuration="0.75"
      ariaLabel="rotating-lines-loading"
      wrapperClass="rotating-lines-custom"
  />
  

• 处理Next.js CSS模块化的类名哈希问题
  若使用CSS模块化（文件名形如xxx.module.css），自定义类名会被自动哈希，无法匹配组件内部的SVG元素。此时用:global()包裹类名取消哈希：

  :global(.stroke-white) {
      stroke: #fff !important;
  }
  

  之后直接在组件的className中使用该类名即可。

• 滤镜转换颜色（备选方案）
  如果以上方法都不生效，可通过CSS滤镜快速转换颜色，比如将默认深色转为白色：

  <RotatingLines
      visible={true}
      height="36"
      width="36"
      strokeWidth="5"
      animationDuration="0.75"
      ariaLabel="rotating-lines-loading"
      wrapperStyle={{ filter: 'invert(100%)' }}
  />
  

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