鉴于 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 期望第二个参数是：列表（Html 消息）但它是：列表 (Html.Styled.Html 消息)"

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

Answer 1

您似乎在第一段代码中使用了 rtfeldman/elm-css package for Html.Styled。

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

混合使用这两个包可能会造成混淆，因为它们有许多名称相同的类型和函数。但是，Html.Styled 包的作者提供了在两者之间进行转换的函数：

You can convert from this to the normal Html type from elm-lang/html (which is a type alias for VirtualDom.Node) by using Html.Styled.toUnstyled.

You can convert the other way using Html.Styled.fromUnstyled.

我想在你的情况下，答案是这样的：

div [] [
    Html.Styled.toUnstyled logo
]

鉴于 ELM 应用程序，样式化组件出错

Error with styled component in view of ELM app

elm