Using elm-css with elm-mdl

0
votes

I am trying to style an elm-mdl component using elm-css attributes:

Button.render Mdl
  [ 5 ]
  model.mdl
  [ Button.colored
  , Button.raised
  , Button.ripple
  , marginRight (px 20)
  ]
  [ text "Register" |> toUnstyled ]
  |> fromUnstyled

but the line marginRight (px 20) generates an error because the Button expects a Button.Property m and marginRight (px 20) is a Style.

Is there any sequence of function calls that can convert a CSS style created by elm-css so that it is usable by elm-mdl?

For now, I'm using Material.Options.css "margin-right" "20px", but wuold prefer to use elm-css for the type safety.

2
csselm
There's package.elm-lang.org/packages/rtfeldman/elm-css/12.0.0/… but it's deprecated now. I'm not sure if the functionality that replaced this function supports extracting raw CSS. I couldn't find it from a quick search. - Dogbert

2 Answers

0
votes

According to Richard Feldman, the author of the elm-css package, this is not possible: https://github.com/rtfeldman/elm-css/issues/336

0
votes

you can use the following:

toMdlCss : Attribute a -> Material.Options.Property c a
toMdlCss a =
    Material.Options.attribute a

then: toMdlCss <| style [( "padding", "10px" )]