Question

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

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在编译后显示的错误是＆＃34;函数div期望第二个参数为：清单（Html msg）但它是：列表（Html.Styled.Html消息）＆＃34;

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

Answer 1

您似乎在第一个代码块中使用rtfeldman/elm-css Html.Styled包。

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

混合两个包可能会让人感到困惑，因为它们有许多类型和功能相同的名称。但是，Html.Styled包的作者提供了在两者之间进行转换的功能：

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

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

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

div [] [
    Html.Styled.toUnstyled logo
]

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

1 个答案: