时间戳

首页 > 解决方案 > 如何设置语义 UI 禁用按钮的样式

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

问题描述

将“禁用”应用于<Button>. 我想完全改变颜色。

当前按钮：

<Button disabled>{example}</Button>

当前样式不会覆盖变灰：

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

希望能够在某处为残疾人应用新的背景颜色

标签： reactjssemantic-uisemantic-ui-react

解决方案

根据我的经验，这是一种可以像这样重新设计 Button 的好方法

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

去编辑some-location/semantic-ui/site/elements/button.overrides，添加一个类，如.ui.huge.disabled.button带有<Button />属性的size='huge' disabled
示例按钮禁用 css 类

这将导致如下所示： 按钮屏幕截图
顺便说一句，我通过在浏览器中检查它找到了上面的类名：检查器中的 css 类

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

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

推荐阅读