ELM应用程序视图中的样式化组件出错_Elm

ELM应用程序视图中的样式化组件出错

elm

ELM应用程序视图中的样式化组件出错,elm,Elm,无法理解如何在视图模块中使用导入的样式化组件。以下是组件本身： 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

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

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向我显示的错误是“Function

div

希望第二个参数为：列表（Html消息）但事实是：列表（Html.Styled.Html msg）”

如何在其他组件中使用样式化组件？那么问题出在哪里呢？

在第一段代码中，您似乎正在使用包

在第二段代码中，听起来您使用的是标准软件包

混合使用这两个包可能会让人感到困惑，因为它们有许多具有相同名称的类型和函数。但是，

Html.Styled

包的作者提供了在两者之间转换的函数：

您可以使用从

elm lang/Html

（这是

VirtualDom.Node

的类型别名）将其转换为正常的

Html

类型

您可以使用另一种方式进行转换

我认为在你的情况下，答案是：

div[][
Html.Styled.toUnstyled徽标
]

看起来您在第一段代码中使用了的包