克服将 CSS 样式应用于 Elm 应用程序的挑战

Question

我在寻找 Elm 19 应用程序样式的最佳方法时遇到了问题。这是我一直在尝试但无济于事的方法：

module Main exposing (..)

import Browser
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Styled.Attributes exposing (css)
import List exposing (..)
import Css exposing (..)

type alias Model = List Status
type alias Status = { status : String }


main =
    Browser.element
        { init = init
        , view = view
        , update = update
        , subscriptions = subscriptions
        }


-- Note: I removed the init, update, and subscriptions functions from this code snippet as it does not seem like they were relevant to my question.


view : Model -> Html Msg
view model =
    main_ 
        [ css
        [ color (hex "ffffff")
        , backgroundColor (hex "000000")
        , Css.height (vh 100) ]
        ]
        [ h1
            [ css [ margin (px 0) ] ]
            [ text "The title of my app" ]
        , input [ value ""] []
        ]

编译器指出我在 main_ 中遇到的问题如下：

<!-- language: lang-none -->
This argument is a list of type:

    List #(Html.Styled.Attribute msg)#

But `main_` needs the 1st argument to be:

    List #(Attribute msg)#

这是 elm.json 文件：

{
    "type": "application",
    "source-directories": [
        "src"
    ],
    "elm-version": "0.19.1",
    "dependencies": {
        "direct": {
            "elm/browser": "1.0.2",
            "elm/core": "1.0.5",
            "elm/html": "1.0.0",
            "elm/time": "1.0.0",
            "ianmackenzie/elm-units": "2.9.0",
            "justinmimbs/date": "4.0.1",
            "rtfeldman/elm-css": "18.0.0"
        },
        "indirect": {
            "elm/json": "1.1.3",
            "elm/parser": "1.1.0",
            "elm/url": "1.0.0",
            "elm/virtual-dom": "1.0.3",
            "robinheghan/murmur3": "1.0.0",
            "rtfeldman/elm-hex": "1.0.0"
        }
    },
    "test-dependencies": {
        "direct": {},
        "indirect": {}
    }
}

我怀疑我可能使用旧版本的 elm-css 或类似的东西，但我很难理解什么在这里对我不起作用。

Answer 1

为了使用 elm-css，您需要使用 Html.Styled.toUnstyled 从 Html.Styled.Html 转换为 Html.Html。这意味着您需要 import Html.Styled 暴露 (..) 而不是 import Html 暴露 (..)

这意味着 main_ 将是 Html.Syled.main_ 而不是 Html.main_ （现在是这样）。

然后，您可以在 view 代码的末尾添加 |> Html.Styled.toUnstyled ，一切都会正常进行。