Overcoming the Challenges of Applying CSS Styles to Elm Applications

Question

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.

Answer 1

In order to use elm-css, you need to convert from Html.Styled.Html to Html.Html# using Html.Styled.toUnstyled ##. This means you need to import Html.Styled expose (..) instead of import Html expose (..)

This means

main_ will be Html.Syled.main_ instead of Html.main_ (as it is now).

Then you can add

|> Html.Styled.toUnstyled at the end of the view code and everything will work fine.