gpt4 book ai didi

css - 如何在 React 中向 DOM 元素添加动态 TailwindCSS 类

转载 作者:行者123 更新时间:2023-12-04 00:20:07 25 4
gpt4 key购买 nike

我是 TailWindCSS 的新手,我想为 Button 元素添加启用/禁用样式。如何有条件地向按钮添加禁用的特定样式/类(即假设我需要添加“opacity-50 cursor-not-allowed”)?

    <button
className="bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 border-b-4 border-blue-700 hover:border-blue-500 rounded mr-3"
disabled={!globalContext.users.length > 0}
onClick={handleClearResultsClick}
>
Clear Results
</button>

最佳答案

  • 您可以使用新的 ES6 "template strings" .
  • 这是一个简单的React component当计数器 <= 0 时禁用 (-) 按钮
  • .pointer-even-none是呈现禁用按钮的 tailwindCSS 类
    const [count, setCount] = useState(0);

    return (
    <Fragment>
    {/* button Substract with styles tailwind*/}
    <button className={`p-2 ${count <= 0 ? 'opacity-50 pointer-events-none': 'bg-red-700'}`}
    onClick={() => setCount( count - 1 )}>
    Substract
    </button>

    {/* Counter */}
    <span className="p-2">{ count }</span>

    {/* button Add whit styles tailwind*/}
    <button className="p-2 bg-green-700"
    onClick={() => setCount(count + 1 )}>
    Add
    </button>
    </Fragment>
    )
  • 关于css - 如何在 React 中向 DOM 元素添加动态 TailwindCSS 类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61373153/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com