如何更改 Fable / Fulma 中 <body> 元素的背景颜色？

Question

这是我使用 F# 使用 Fable（用于编译为 Javascript）和 Fulma（用于 CSS 渲染）编写的客户端 Web 应用程序片段

let view (model: MyModel) dispatch =
    div [ Style [CSSProp.BackgroundColor "green"]] [
         Button.button  [ Button.Size IsSmall ]  [ str "START" ]
    ]

目前只有div块的背景颜色设置为绿色。我知道我可以将其硬编码为 index.html 或 bulma.css 以更改整个 HTML 页面的背景颜色，但我正在根据规则寻找一种在 F# 中执行此操作的方法由 Fulma 建立。

Answer 1

我自己并没有实际使用过 Fulma，但我快速浏览了一下 the default Fulma template。其工作方式是在 index.html:

中有一个 ID 为 elmish-app 的 <div> 元素

<body>
    <div id="elmish-app"></div>
</body>

并且F#代码指定使用<div>元素来显示由view:

生成的元素

Program.mkProgram init update view
|> Program.withReactSynchronous "elmish-app"
|> Program.run

鉴于此，您可以尝试将 id 添加到 body 元素，然后在您的视图中生成 HTML 包含 body 元素的内容。如果 React 实际上用你从 view 生成的任何内容替换原始元素（而不是仅仅将其添加为嵌套元素），这个技巧就可以工作。

Answer 2

研究 Fulma/Bulma 的布局选项后 here 我能够以符合 Fulma 的方式更改整个页面的背景颜色：

let view (model: MyModel) dispatch =
    Hero.hero [ Hero.Color IsSuccess
                Hero.IsFullHeight ]
               [ Hero.body []
                          [ Button.button []
                              [ str "START" ]]]

事实上，Hero 布局选项被证明是非常通用的，例如您可以用 Hero.IsLarge、Hero.IsHalfHeight 等覆盖背景的不同部分...

如何更改 Fable / Fulma 中 <body> 元素的背景颜色？

How can I change the background color of the <body> element in Fable / Fulma?

f#

bulma

fable-f#