将 elm-css 与 elm-mdl 一起使用

Question

我正在尝试使用 elm-css 属性设置 elm-mdl 组件的样式：

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

但是行 marginRight (px 20) 会产生错误，因为 Button 需要 Button.Property m 而 marginRight (px 20) 是 Style.

是否有任何函数调用序列可以将 elm-css 创建的 CSS 样式转换为可供 elm-mdl 使用？

目前，我使用 Material.Options.css "margin-right" "20px"，但为了类型安全，我更喜欢使用 elm-css。

Answer 1

根据 elm-css 包的作者 Richard Feldman 的说法，这是不可能的：https://github.com/rtfeldman/elm-css/issues/336

Answer 2

您可以使用以下内容：

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

然后：toMdlCss <| style [( "padding", "10px" )]

将 elm-css 与 elm-mdl 一起使用

Using elm-css with elm-mdl

css

elm