Elm 19应用CSS样式配置报错：参数类型不匹配求助

问题根源 #

你混用了原生Html模块的元素（比如Html.main_）和elm-css的Html.Styled.Attribute属性。原生Html元素只接受Html.Attribute msg类型的参数，而css函数生成的是Html.Styled.Attribute msg，两者类型不兼容。

分步解决方案 #

1. 导入正确的模块 #

替换原生Html导入为Html.Styled模块（或同时保留，用别名区分）：

import Html.Styled as Html exposing (main_, div, text)
import Html.Styled.Attributes exposing (css)
import Css exposing (..)

2. 使用Styled版本的DOM元素 #

将你代码中的Html.main_（原生元素）替换为Html.Styled.main_（如果已用别名Html导入，直接写Html.main_即可），Styled模块的元素会接受List (Html.Styled.Attribute msg)类型的属性参数。

3. 转换Styled Html为原生Html #

在main函数中，需要把Html.Styled.Html转换成Elm程序能识别的原生Html.Html，用Html.toUnstyled函数：

main : Program () Model Msg
main =
    Html.program
        { init = init
        , update = update
        , subscriptions = subscriptions
        , view = view >> Html.toUnstyled
        }

4. 验证elm-css版本兼容性 #

Elm 19要求elm-css版本至少为16.0.0，检查你的elm.json配置：

"dependencies": {
    "elm/core": "1.0.5",
    "elm/html": "1.0.0",
    "rtfeldman/elm-css": "16.1.0"
}

如果版本过低，运行elm install rtfeldman/elm-css更新到兼容版本。

完整示例代码 #

module Main exposing (..)

import Html.Styled as Html exposing (main_, div, text)
import Html.Styled.Attributes exposing (css)
import Css exposing (..)

-- 你的Model、Msg、init、update、subscriptions定义

view : Model -> Html.Styled.Html Msg
view model =
    main_
        [ css
            [ padding (px 20)
            , backgroundColor (hex "#f5f5f5")
            , fontSize (px 16)
            ]
        ]
        [ div [] [ text "Styled content with elm-css" ] ]

main : Program () Model Msg
main =
    Html.program
        { init = init
        , update = update
        , subscriptions = subscriptions
        , view = view >> Html.toUnstyled
        }

内容的提问来源于stack exchange，提问作者Yves Gurcan