克服将 CSS 样式应用于 Elm 应用程序的挑战
P粉627427202
P粉627427202 2024-03-29 20:09:28
0
1
430

我在寻找 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 或类似的东西,但我很难理解什么在这里对我不起作用。

P粉627427202
P粉627427202

全部回复(1)
P粉135799949

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

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

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!