克服將 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 ，一切都會正常進行。