How to add Css.batch styles from another module

Learn
1

Hi,

I am new Elm, I am trying to use elm-css. I have created separate module called SignupStyles.elm, below is the code which i have in there

inputTextStyle : Style
inputTextStyle =
    Css.batch
        [ display block
        , padding2 (px 12) (px 20)
        , margin2 (px 8) (px 0)
        , border (px 0)
        , borderRadius (px 4)
        ]

In the main module Signup.elm i import the style module using import SignupStyles.elm exposing (..).
I would like to add the above style to the text field

view : User -> Html msg
view user =
    div []
        [ h1 [] [ text "Sign up" ]
        , Html.Styled.form []
            [ div []
                [ text "Name"
                , input
                    [ inputTextStyle
                    ]
                    []
                ]
            ]
        ]

And i get the following error

The 1st argument to function input is causing a mismatch. - Function input is expecting the 1st argument to be:
List (Attribute msg)
But it is:
List Style

I am unable to figure out a way to fix this issue. Kindly let me know how to fix this or if i have to change this approach altogether.

Thank You.

2

You need to use Html.Styled.Attributes.css which has the following type:

css : List Style -> Attribute msg

Your code would then be:

import Html.Styles.Attributes exposing (css)

view : User -> Html msg
view user =
    div []
        [ h1 [] [ text "Sign up" ]
        , Html.Styled.form []
            [ div []
                [ text "Name"
                , input
                    [ css [inputTextStyle]
                    ]
                    []
                ]
            ]
        ]
1 Like
3

Thank you very much @enetsee. Works perfectly.
For performance Would you suggest this method or the adding an external css file( ignoring the static type checking advantage while using elm-css)

4

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.