如何使用尾风CSS通过道具改变组件中的元素顶部边框颜色(已解决)

Question

我试图通过将颜色值作为道具传递给组件来更改顶部边框的颜色，但它没有产生任何效果。

我在找解决办法。请帮帮我!

export default function TargetsProgressInfo(props) {
    return (

            <ul>
                <span className={` after:border-[7px] after:w-4 ${props.colorTip} after:border-b-transparent`}></span></li>
            </ul>
        </div >

    )
}


**home.jsx**

<TargetsProgressInfo colorTip="after-border-t-red-600"/>

Answer 1

解决方案是将尾风CSS的全名作为道具传递。

        <TargetsProgressInfo colorTip="after:border-t-red-600"/>

Answer 2

您可以使用边框-t-{color}实用程序类。还可以使用后置伪类在元素呈现后向元素添加边框。

<ul>
  <li className="after:border-[7px] after:w-4 after:border-t-{props.colorTip} after:border-b-transparent">
    {/* ... */}
  </li>
</ul>

然后，您可以将所需的颜色作为支柱传递给组件：

这将向组件中的li元素添加一个7pxred-600顶部边框。