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

Question

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

\n

module Main exposing (..)\n\nimport Browser\nimport Html exposing (..)\nimport Html.Attributes exposing (..)\nimport Html.Styled.Attributes exposing (css)\nimport List exposing (..)\nimport Css exposing (..)\n\ntype alias Model = List Status\ntype alias Status = { status : String }\n\n\nmain =\n    Browser.element\n        { init = init\n        , view = view\n        , update = update\n        , subscriptions = subscriptions\n        }\n\n\n-- 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.\n\n\nview : Model -> Html Msg\nview model =\n    main_ \n        [ css\n        [ color (hex "ffffff")\n        , backgroundColor (hex "000000")\n        , Css.height (vh 100) ]\n        ]\n        [ h1\n            [ css [ margin (px 0) ] ]\n            [ text "The title of my app" ]\n        , input [ value ""] []\n        ]\n

\n

编译器指出 I\xe2\x80\x99m 遇到的问题main_如下：

\n

<!-- language: lang-none -->\nThis argument is a list of type:\n\n    List #(Html.Styled.Attribute msg)#\n\nBut `main_` needs the 1st argument to be:\n\n    List #(Attribute msg)#\n

\n

这是elm.json文件：

\n

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

\n

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

\n

Answer 1

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

这意味着main_将Html.Syled.main_代替Html.main_（就像现在一样）。

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