用TailwindUI在NextJS应用程序上实现禁用按钮状态

Question

我有一个使用原子CSS的NextJS应用程序，如果没有填写表单，它的按钮就会被禁用：

      <Button
        className="primary"
        onClick={handleCreateCommunity}
        disabled={!phone || !communityName}
      >
        Create
      </Button>

我想更改为使用新的TailwindUI主按钮样式：

.primary-btn {
    @apply inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500;
}

显然，我需要应用className="primary" --但我不知道如何使残疾人状态正常工作。我是否创建了另一个类似于.btn-disabled的组件？但是，当表单没有填写时，我该如何应用这种风格呢？

--

编辑：

这就是我的index.css的样子：

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
    .primary-btn {
        @apply inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:bg-gray-300;
    }
 }

Answer 1

您需要为残废状态定义样式，就像使用focus一样。

编辑:根据您的评论，您没有使用指令。它们是必不可少的，因为它们在编译期间覆盖默认的顺风样式，因此它们不会被复制，并且在构建时也会清除未使用的自定义样式。

自定义样式必须在应用到的层之后导入。在你的例子中，在@tailwind components之后。

@tailwind components;

@layer components {
 .primary-btn {
  @apply disabled:bg-blue-300;
 }
}

Answer 2

如果您想从atomic-css轻松切换到tailwind-css，我更希望您使用tailwind-css提供的button组件

遵循这个粗略的模式来获得你想要的结果。

<button
  type="button"
  className=" /* enable class attributes */
               disabled: /* disabled class attributes*/ "
  disabled={/* disable logic in true or false */}
>

因此，您的最终代码如下：

<button
  type="button"
  className=" inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:bg-gray-300"
  onClick={handleCreateCommunity}
  disabled={!phone || !communityName} // your disable logic goes here
>
  Primary
</button>

输出：

禁用时为假：

​

​

禁用时为真

​

​

注意：如果您想在css文件中定义类属性，可以通过在@layer components中的index.css文件中添加样式来实现这一点。

@layer components {
  .primary-btn {
    @apply m-5 inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:bg-gray-300;
  }
}

然后按钮的className变成了primary-btn

 <button
      type="button"
      className="primary-btn"
      disabled={false} // your disable logic goes here
    >
      Primary
 </button>