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

Question

我是 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>

Answer 1

• 您可以使用新的ES6“模板字符串”。

• 这是一个简单的React 组件，它在 counter <= 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>
  )