ELM 应用程序中样式组件出现错误

Question

无法理解如何在视图模块中使用导入的样式组件。这是组件本身：

module Logo exposing (logo)

import Css exposing (..)
import Html
import Html.Styled exposing (..)
import Html.Styled.Attributes exposing (css, src)

theme : { secondary : Color, primary : Color }
theme =
    { primary = hex "55af6a"
    , secondary = rgb 250 240 230
    }

logo : Html msg
logo =
  img
    [ src "logo.png"
    , css
        [ display inlineBlock
        , padding (px 20)
        , border3 (px 5) solid (rgb 120 120 120)
        , hover
            [ borderColor theme.primary
            , borderRadius (px 10)
            ]
        ]
    ]
    []

这是我想使用它的地方：

view : Model -> Html Msg
view model =
  div [] [
    div [] [
      div [] [
        button
          [ onClick { operation = "INCREMENT", data = "Already clicked!" } ]
          [ text model.title ]
      ],
      div [] [
        logo
      ]
    ]
  ]

编译后 ELM 向我显示的错误是“函数div期望第二个参数为：List (Html msg) 但它是：List (Html.Styled.Html msg)”

如何在其他组件中使用样式组件？问题是什么？

Answer 1

看起来您正在第一个代码块中使用该rtfeldman/elm-css包。Html.Styled

在第二个代码块中，听起来您正在使用标准elm-lang/html包。

混合这两个包可能会变得令人困惑，因为它们具有许多具有相同名称的类型和函数。然而，该包的作者Html.Styled提供了在两者之间进行转换的函数：

您可以使用将此类型转换为普通Html类型elm-lang/html（这是 的类型别名） 。VirtualDom.NodeHtml.Styled.toUnstyled

您可以使用其他方式进行转换Html.Styled.fromUnstyled。

我认为对于你的情况，答案是这样的：

div [] [
    Html.Styled.toUnstyled logo
]