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.Html
toHtml.Html# using
Html.Styled.toUnstyled##. This means you need to
import Html.Styled expose (..)instead of
import Html expose (..)main_
Then you can addwill be
Html.Syled.main_instead of
Html.main_(as it is now).
|> Html.Styled.toUnstyled
at the end of the
viewcode and everything will work fine.