I'm having trouble finding the best way to style my Elm 19 application. Here's what I've been trying to no avail:
module Main exposing (..)
import Browser
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Styled.Attributes exposing (css)
import List exposing (..)
import Css exposing (..)
type alias Model = List Status
type alias Status = { status : String }
main =
Browser.element
{ init = init
, view = view
, update = update
, subscriptions = subscriptions
}
-- Note: I removed the init, update, and subscriptions functions from this code snippet as it does not seem like they were relevant to my question.
view : Model -> Html Msg
view model =
main_
[ css
[ color (hex "ffffff")
, backgroundColor (hex "000000")
, Css.height (vh 100) ]
]
[ h1
[ css [ margin (px 0) ] ]
[ text "The title of my app" ]
, input [ value ""] []
]
The compiler pointed out that the problem I encountered in main_ was as follows:
<!-- language: lang-none -->
This argument is a list of type:
List #(Html.Styled.Attribute msg)#
But `main_` needs the 1st argument to be:
List #(Attribute msg)#
This is elm.json file:
{
"type": "application",
"source-directories": [
"src"
],
"elm-version": "0.19.1",
"dependencies": {
"direct": {
"elm/browser": "1.0.2",
"elm/core": "1.0.5",
"elm/html": "1.0.0",
"elm/time": "1.0.0",
"ianmackenzie/elm-units": "2.9.0",
"justinmimbs/date": "4.0.1",
"rtfeldman/elm-css": "18.0.0"
},
"indirect": {
"elm/json": "1.1.3",
"elm/parser": "1.1.0",
"elm/url": "1.0.0",
"elm/virtual-dom": "1.0.3",
"robinheghan/murmur3": "1.0.0",
"rtfeldman/elm-hex": "1.0.0"
}
},
"test-dependencies": {
"direct": {},
"indirect": {}
}
}
I suspect I might be using an older version of elm-css or something similar, but I'm having trouble understanding what isn't working for me here.
In order to use
This meanselm-css, you need to convert fromHtml.Styled.HtmltoHtml.Html# usingHtml.Styled.toUnstyled##. This means you need toimport Html.Styled expose (..)instead ofimport Html expose (..)main_
Then you can addwill beHtml.Syled.main_instead ofHtml.main_(as it is now).|> Html.Styled.toUnstyled
at the end of theviewcode and everything will work fine.