顺风CSS -如何禁用转换/过渡悬停时，一个按钮被禁用?

Question

我对顺风CSS和CSS都是新手。我需要让我的按钮停止做变换/过渡效果时，他们被禁用。目前，禁用的颜色变化正在应用，但转换/过渡仍在悬停时发生。

我尝试使用-disabled:transform-none和disabled:transition-none但是它没有给出期望的结果。

正在使用的技术是-ReactJS，顺风CSS

使用的类的虚拟代码片段如下:

<button 
disabled={disableIt} 
className="text-xs rounded disabled:transform-none disabled:transition-none disabled:bg-gray disabled:cursor-not-allowed disabled:text-white bg-gray-600 mx-1 transition duration-500 ease-in-out transform hover:translate-x-1 hover:scale-110  hover:blue-300 hover:shadow-md"
>
Click me
</button>

注意:disableIt是用于禁用或启用

按钮的状态。我tailwind.config.js的变体部分如下:

variants: {
opacity: ({ after }) => after(["disabled"]),
backgroundColor: ({ after }) => after(["disabled"]),
textColor: ({ after }) => after(["disabled"]),
hover: ({ after }) => after(["disabled"]),
cursor: ({ after }) => after(["disabled"]),
transition: ({ after }) => after(["disabled"]),
transform: ({ after }) => after(["disabled"]),
extend: {
padding: ["hover"],
},
},

请帮帮我。

Answer 1

您可以使用enabled修饰符仅在启用按钮时应用某个类。

这允许您指定仅在按钮启用时才添加的类，而不是试图"删除"。当按钮被禁用时，某些类。

下面是一个基于原始代码的简单示例:

<button 
disabled={disableIt} 
className="enabled:transition enabled:transform 
enabled:hover:translate-x-1 enabled:hover:blue-300"
>
Click me
</button>

Answer 2

如果您希望禁用按钮不触发任何交互状态，如:hover或active，您也可以简单地添加

disabled:pointer-events-none

到顺风className.

Answer 3

in tailwind.config.js

variants: {
extend: {
opacity:["disabled"],
cursor:["disabled"]
},
},

现在如果你添加"disabled"到className中，tailwind将提供它作为修饰符。请确保在修改配置文件后重新编译它。

className="text-xs rounded disabled:transform-none disabled:transition-none disabled:bg-gray disabled:cursor-not-allowed disabled:text-white bg-gray-600 mx-1 transition duration-500 ease-in-out transform hover:translate-x-1 hover:scale-110  hover:blue-300 hover:shadow-md"
>

这个应该可以工作。

Answer 4

它适用于我没有使用jit的变体配置。

这个例子是使用纯HTML来告诉你如何完成的，你需要把它改成React。

<div class="flex items-center justify-center min-h-screen">
<button disabled class="px-4 py-2 text-white text-xs rounded disabled:transform-none disabled:transition-none disabled:bg-gray disabled:cursor-not-allowed disabled:text-white bg-gray-600 mx-1 transition duration-500 ease-in-out transform hover:translate-x-1 hover:scale-110 hover:blue-300 hover:shadow-md disabled:shadow-none">Disabled Click</button>
<button class="px-4 py-2 text-white text-xs rounded disabled:transform-none disabled:transition-none disabled:bg-gray disabled:cursor-not-allowed disabled:text-white bg-gray-600 mx-1 transition duration-500 ease-in-out transform hover:translate-x-1 hover:scale-110 hover:blue-300 hover:shadow-md disabled:shadow-none">Click</button>
</div>

我留下一个例子https://play.tailwindcss.com/RBb3RtRB4B

Answer 5

try this==>

<button 
disabled={disableIt} 
className="disabled:opacity-75 disabled:pointer-events-none text-xs rounded  bg- 
gray-600 mx-1 transition duration-500 ease-in-out transform 
hover:translate-x-1 hover:scale-110  hover:blue-hover:shadow- 
md"
>Click me
</button>

Answer 6

我个人是这样做到的:

<button
disabled={!onClick}
type="button"
onClick={onClick}
className={cx(
`flex cursor-pointer flex-col items-center disabled:pointer-events-none disabled:cursor-default`,
className,
)}
>

如果没有onClick函数传递给我的组件，我禁用css悬停和光标