如何用Tailwind CSS实现ThumbsUp SVG手腕与主体颜色区分

问题出在你用了通用选择器*匹配子元素，这容易误选非<path>的子元素（哪怕当前SVG只有两个path，精准选择也更可靠）。我们需要直接定位第二个<path>来设置填充色，同时确保手腕分隔线（第一个path）的描边为黑色。

修正后的代码如下：

import { ThumbsUp } from "lucide-react";

<ThumbsUp
  strokeWidth={1}
  size={20}
  className={`${
    commentReaction?.type === "LIKE"
      ? "stroke-black [&>path:nth-child(2)]:fill-base-white"
      : "dark:text-base-white"
  }`}
/>

关键修改说明： #

• 把[&>*:nth-child(2)]替换为[&>path:nth-child(2)]：精准选中SVG内部的第二个<path>（大拇指主体区域），避免误匹配其他潜在子元素。
• stroke-black：给整个图标设置黑色描边，第一个path（手腕线）会继承该颜色，呈现黑色线条。
• fill-base-white：仅给第二个path设置白色填充，让大拇指主体和黑色手腕线形成清晰区分。

最终效果： #

渲染后的SVG会呈现：

• 第一个path（手腕线）：黑色描边，无填充
• 第二个path（大拇指区域）：黑色描边，白色填充

完全满足你想要的视觉区分需求。

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