CODEWITHSUNDEEP
elm
spacehaz
spacehaz

Reputation: 61

Error with styled component in view of ELM app

cant understand how to use imported styled component in View module. here is the component itself:

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)
            ]
        ]
    ]
    []

and here is where I want to use it:

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

the error ELM shows me after compile is "Function div is expecting the 2nd argument to be: List (Html msg) But it is: List (Html.Styled.Html msg)"

how can I use styled component in other components ? and what is the problem ?

Upvotes: 1

Views: 235

Answers (1)

Chad Gilbert
Chad Gilbert

Reputation: 36375

It looks like you are using the rtfeldman/elm-css package for Html.Styled in the first block of code.

In the second block of code it sounds like you are using the standard elm-lang/html package.

It can become confusing to mix the two packages because they have many types and functions with identical names. However, the author of the Html.Styled package offers functions to convert between the two:

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.

I think in your case, the answer is this:

div [] [
    Html.Styled.toUnstyled logo
]

Upvotes: 6

Related Questions