按钮样式防止按钮被禁用答案

【问题标题】：Button style prevents the button to be disabled按钮样式防止按钮被禁用
【发布时间】：2021-09-19 16:55:40
【问题描述】：

我今天遇到了一个奇怪的问题，即样式阻止按钮被禁用。我删除了样式并且按钮正常工作（禁用）。我正在处理我给按钮上课的反应。我也尝试过内联样式，但也没有用。（也许是因为反应）。它还在开发工具中显示了类似<button class="global-delete-icon" disabled> 的按钮，但实际上并非如此。我尝试尝试这些解决方案，但没有帮助。

1. <button className="global-delete-icon" disabled>

2. <button ... disabled="disabled">

3. <button ... disabled={true}>

4. <button ... disabled="true">

我正在使用 SCSS 来设置样式，所以我认为问题可能是因为这个，但实际上并非如此。

.global-delete-icon {
    background-color: #d9534f;
    margin-inline: 5px;
    color: #fff;
    border-radius: 4px;
    transition: 100ms ease-in-out;

    i {
        margin: 7.5px;
    }

    &:hover {
        background-color: #b8524e;
    }
}

我以前从未见过这样的东西，并且已经查看了这个Stack Overflow question，但它没有帮助。

在 StackOverflow 的代码运行器（无反应）上赋予样式和禁用按钮效果很好。

【问题讨论】：

嗨！您能否包含更多您遇到问题的实际代码块？
似乎不可能......可能需要查看重现问题的实际代码
在 HTML 中，“布尔”属性意味着您只输入disabled，不 disabled="true"（尽管您可以也可以输入disabled="disabled"对于 XHTML)。
CSS 类属性是class=""，不是 classname=""。
@Sanmeet 不，这不能“完美”工作，恰恰相反：它只会禁用鼠标指针的交互：因此您仍然可以使用键盘与按钮交互，例如使用 Tab + 空格或 Tab + Enter。浏览器甚至可以在页面加载时自动聚焦按钮，因此如果用户不小心按下键盘上的 enter 按钮，那么也会调用按钮的 click 事件侦听器或默认操作。

标签： javascript html css reactjs

【解决方案1】：

我进行了测试，发现该按钮实际上已禁用，但 CSS 仍在应用中，使其看起来仍处于启用状态。所以你可以创建一个或多个 :disabled 规则来改变它的外观。

.global-delete-icon {        
    &:disabled {
      background-color: #CCC;
    }
    
    &:hover:disabled {
      background-color: #CCC;
    }
}

【讨论】：