gpt4 book ai didi

css - 努力将 CSS 样式应用到 Elm 应用程序

转载 作者:行者123 更新时间:2023-12-02 17:59:05 26 4
gpt4 key购买 nike

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

最佳答案

为了使用elm-css,您需要使用Html.Styled.HtmlHtml.Html的转换>Html.Styled.toUnstyled。这意味着您需要 import Html.Styled exusing (..) 而不是 import Html exusing (..)

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

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

关于css - 努力将 CSS 样式应用到 Elm 应用程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/74881964/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com