（如何）我可以更改 F# Fable Elmish 中禁用按钮的字体颜色吗？答案

【问题标题】：(How) Can I change the font color of a disabled button in F# Fable Elmish?（如何）我可以更改 F# Fable Elmish 中禁用按钮的字体颜色吗？
【发布时间】：2019-07-26 11:24:58
【问题描述】：

我尝试通过样式颜色设置颜色，但它仅在未禁用时更改颜色。是否有可能使用或不使用 Fulma？

Button.button
    [
        Button.Disabled true
        Button.Props [
            Style [ Color "#000000" ] ]
        //if … then
        Button.OnClick (fun _ -> dispatch Msg)
    ]
    [ str "Text here" ]

作为最后的手段，我会在调度函数中使用 if 条件，这样按钮就没有用了。

提前致谢。

【问题讨论】：

标签： button f# fable-f# elmish

【解决方案1】：

@nilekirk 解决方案确实是使用内联样式的正确方法。

但如果你的应用程序中有很多按钮，它会使代码变得非常冗长。

另一种解决方案是将一些 CSS 直接应用于所有禁用的按钮，或者如果您不希望所有按钮都具有这种行为，则可以添加自定义类。

应用到应用的所有按钮

CSS 代码：

.button[disabled] {
    background-color: black !important;
}

F# 代码：

Button.button
    [
        Button.Disabled true
        Button.OnClick (fun _ -> dispatch Msg)
    ]
    [ str "Text here" ]

使用自定义类来选择哪个按钮应具有此行为

CSS 代码

.button.custom-disabled[disabled] {
    background-color: black !important;
}

F# 代码

Button.button
    [
        Button.CustomClass "custom-disabled"    
        Button.Disabled true
        Button.OnClick (fun _ -> dispatch Msg)
    ]
    [ str "Text here" ]

【讨论】：

谢谢，这行得通。让它更复杂一点：字体是否可能看起来不像被禁用（禁用时颜色看起来仍然有点偏离）
如果您使用 scss 包含 Bulma，您可以将 $button-disabled-opacity 设置为 1。如果没有，您可以使用 css 将 opacity 设置为 1。默认为 0.5。
另外使用以下行：@import "./../../node_modules/bulma/sass/elements/button";有用。谢谢！

【解决方案2】：

如果您只想为禁用的情况更改字体颜色，您可以为此生成一个新样式：

Button.button
    [
        Button.Disabled isDisabled
        Button.Props [
            if isDisabled then yield Style [ Color "#000000" ] ]
        Button.OnClick (fun _ -> dispatch Increment)
    ]
    [ str "Text here" ]

如果你想根据禁用状态有不同的颜色，你可以使用if-then-else 表达式：

Button.button
    [
        Button.Disabled isDisabled
        Button.Props [
            Style [ (if isDisabled then Color "#000000" else Color "#ffffff") ] ]
        Button.OnClick (fun _ -> dispatch Increment)
    ]
    [ str "Text here" ]

【讨论】：

您好，感谢您的提示，但我在编辑帖子代码时不小心在禁用后删除了布尔值。它可以工作，但我想在禁用状态下更改字体的颜色
请问，isDisabled 在哪里以及如何定义？ VS 告诉我，这没有定义
isDisabled 是您定义的布尔值 - 很可能，它属于您的模型。