代码之家  ›  专栏  ›  技术社区  ›  spacehaz

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

elm
  •  1
  • spacehaz  · 技术社区  · 7 年前

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

    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消息)”

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

    1 回复  |  直到 7 年前
        1
  •  6
  •   Chad Gilbert    7 年前

    看起来您正在使用 rtfeldman/elm-css 的程序包 Html.Styled 在第一段代码中。

    在第二段代码中,听起来您使用的是标准 elm-lang/html 包裹

    混合使用这两个包可能会让人感到困惑,因为它们有许多名称相同的类型和函数。然而 Html。样式化 软件包提供了在以下两者之间转换的功能:

    您可以将其转换为普通 Html 键入发件人 elm语言/html (这是的类型别名 VirtualDom.Node )通过使用 Html.Styled.toUnstyled

    您可以使用 Html.Styled.fromUnstyled

    我认为在你的情况下,答案是:

    div [] [
        Html.Styled.toUnstyled logo
    ]