【问题标题】：Appending styling in reactjs whilst using tailwind在使用顺风的同时在 reactjs 中添加样式
【发布时间】：2021-12-09 18:34:30
【问题描述】：

我想在用户单击按钮时为元素设置动画。该元素显示按钮被点击的次数。这是通过每次单击按钮时递增的状态来管理的。

每当单击按钮时，显示的数字应弹跳/动画，以强调其变化。

本质上，我想有条件地附加一个 CSS 类。有很多如何做到这一点的示例，但几乎所有示例都只应用了一个类，而不是很多类。

我使用tailwindcss 进行样式设置。这意味着大量元素上的大量 CSS 类。

我所考虑的

字符串连接

有一个classNames 数组，可以轻松添加和删除动画类。

const [count, setCount] = useState(0);
const [classNames, setClassNames] = useState([
    'text-2xl', 'mb-2', 'font-bold', 'text-black', 'dark:text-white'
]);

const countElement = <p className={classNames.join(' ')}>{count}</p>;

const handleClick = () => {
    
    setCount(count + 1);
    
    // Append the animation class.
    setClassNames(classNames.concat('animate-bounce'));

    // Remove the animation class after the animation is done.
    setTimeout(() => {
        setClassNames(classNames.filter(className => 
            className !== 'animate-bounce'));
    }, 1000);
};

return <>
    {count > 0 ? countElement : null}
    <button className="px-4 py-3 mb-2 rounded-lg font-semibold transition-colors duration-300
                       bg-cardinal-default hover:bg-cardinal-dark active:bg-cardinal-darkest
                       text-black dark:text-white" 
                       onClick={handleClick}>Click me</button>
</>;

虽然使用 tailwindcss 这有点难看，因为 它将所有样式与其实际元素分开。不完全理想。感觉很hacky。

动画内部元素

    const [isBouncing, setIsBouncing] = useState(false);

    const countElement = (
        <p className="text-2xl mb-2 font-bold text-black dark:text-white">
            <span className={isBouncing ? 'inline-block animate-spin' : ''}>{count}</span>
        </p>
    );

    ...
    
        setCount(count + 1);
        setIsBouncing(true);

        setTimeout(() => setIsBouncing(false), 1000);
    
    ...

这样更好，但还是需要我设置inline-block

有更好的方法吗？还是我已经用尽了所有有价值的解决方案？

【问题讨论】：

标签： javascript reactjs tailwind-css

【解决方案1】：

您可以使用 styled-components 之类的 css-in-js 解决方案，这将使启用/禁用样式变得非常容易。

对于顺风有一个库来帮助 css-in-js 调用 twin

这允许您有条件地启用样式：

const Button = styled.button`
  ${tw`your tailwind styles here`}
  ${props => props.shouldAnimate ? `some animation css here` : "" }
`

【讨论】：

【解决方案2】：

TailwindCSS 是一个实用程序优先的 CSS 框架，因此除了将类附加到您的元素之外可能没有其他选择。

如果您要使用像 Framer Motion 这样的动画库，则无需附加 Tailwind 类。另一方面，您需要自己创建动画，这很容易。

考虑到您的考虑，第一个替代方案似乎确实非常 hacky，而第二个替代方案则没有并且应该也可以。

不过，由您决定哪种方法最适合您。

【讨论】：