按钮样式防止按钮被禁用

Question

我今天遇到了一个奇怪的问题，样式阻止了按钮被禁用。我删除了样式和按钮工作(禁用)正确。我在用react我给了一个类给按钮。我也尝试过行内样式，但它也没有帮助。(也许是因为反应)。它在开发工具中也显示了这个按钮，<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;
}
}

我以前没有见过这样的东西，并且已经复习了这个堆栈溢出问题，但是它没有帮助。

它的工作很好给样式和禁用按钮在StackOverflow的代码运行器(没有反应)。

Answer 1

我运行了一个测试，我看到按钮实际上是禁用的，但CSS仍然被应用，使它看起来像它仍然是启用的。因此，您可以创建一个或多个:disabled规则来更改它的外观。

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

&:hover:disabled {
background-color: #CCC;
}
}