基于TailWindCSS sm断点切换React SVG组件填充颜色的方法

最简便的Tailwind原生方案（纯CSS） #

Tailwind无法直接给SVG的fill属性添加断点类，但可以通过SVG的currentColor特性结合Tailwind的颜色断点类实现，完全不需要JS逻辑，步骤如下：

1. 修改ArrowUp组件，让路径填充色继承CSS的color属性：

const ArrowUp = (props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width={12}
    height={12}
    fill="none"
    {...props}
  >
    {/* 用currentColor替代props.fill，继承父元素的color值 */}
    <path
      fill="currentColor"
      d="m11.288 7.783-2.173.07.086-2.662.246-.904-.307-.139-.568.778L1.799 11.7.301 10.2l6.773-6.772.778-.568-.14-.308-.903.247-2.662.086.07-2.173 6.194-.2 1.078 1.077-.2 6.194Z"
    />
  </svg>
);

2. 调用组件时添加Tailwind断点颜色类：
   根据你的需求（<sm断点背景紫色，需SVG填充白色；>=sm断点背景白色，需SVG填充#3D00FF），给组件加上text-white sm:text-[#3D00FF]类：

<ArrowUp 
  className="text-white sm:text-[#3D00FF] group-hover:transform group-hover:rotate-45 group-hover:duration-300 group-hover:ease-in-out inline-block mr-2 ml-2 relative bottom-0.5" 
/>

不修改组件的备选方案（JS控制） #

如果无法修改ArrowUp组件的内部实现，可以通过监听媒体查询动态传递fill属性：

1. 实现一个监听断点的自定义钩子：

const useSmBreakpoint = () => {
  const [isSm, setIsSm] = React.useState(false);

  React.useEffect(() => {
    const mediaQuery = window.matchMedia('(min-width: 480px)'); // 对应你的sm断点宽度
    setIsSm(mediaQuery.matches);

    const handleChange = (e) => setIsSm(e.matches);
    mediaQuery.addEventListener('change', handleChange);
    return () => mediaQuery.removeEventListener('change', handleChange);
  }, []);

  return isSm;
};

2. 动态设置fill属性：

const isSm = useSmBreakpoint();

<ArrowUp 
  fill={isSm ? "#3D00FF" : "#FFFFFF"} 
  className="group-hover:transform group-hover:rotate-45 group-hover:duration-300 group-hover:ease-in-out inline-block mr-2 ml-2 relative bottom-0.5" 
/>

方案对比 #

• 纯CSS方案完全复用Tailwind的断点系统，代码更简洁，性能更好，是首选方案。
• JS方案适合无法修改组件源码的场景，但需要额外处理媒体查询监听。

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