如何设置语义 UI 禁用按钮的样式

Question

将“禁用”应用于<Button> 时，原始按钮颜色似乎会自动变灰。我想完全改变颜色。

当前按钮：

<Button disabled>{example}</Button>

当前没有覆盖变灰的样式：

.labels .button{
  background-color: #6363FA;
  margin: 10px;
  color: #F2F1F7;
}

希望能够为某处的禁用应用新的背景颜色

Answer 1

根据我的经验，这是一种可以像这样重新设置按钮样式的好方法

（如果您还没有设置主题，请先按照此处的指南：https://react.semantic-ui.com/theming/#theming-with-create-react-app！）

去编辑some-location/semantic-ui/site/elements/button.overrides，为<Button />添加一个类似.ui.huge.disabled.button的类，属性size='huge' disabled
sample button disabled css class

这将导致这样的事情： button screenshot
顺便说一句，我通过在浏览器中检查它找到了上面的类名： css class in inspector

我希望这很清楚！如果您有任何问题，请告诉我:)
PS：抱歉没有足够的代表来嵌入图片...

编辑：忘了提一下，在上面的 CSS 示例中，@gold 和 @black 是我添加到 semantic-ui/site/globals/site.variables 中的自定义颜色

Answer 2

我找到了一个更简单的方法。我正在使用 Semantic UI React - 不确定这是否重要。

我有一个按钮的 css 类：

.main-app .landing-page .quick-search {
  background-color: #41B3A3;
  color: rgba(255,255,255,0.9);
}

我添加一个这样的，它可以响应disabled 属性

.main-app .landing-page .quick-search:disabled {
  background-color: #f5f7f6;
  color: rgba(56, 143, 89, 0.9);
}