Question

我正在玩Scala.js，ScalaTags和ScalaCSS。

我看到如何使用ScalaCSS创建内联StyleSheet，以及如何将CSS规则应用于ScalaTags元素。我正在使用ScalaTags在服务器中生成基本的骨架HTML页面，并且访问我的CSS我有类似的东西：

html(
  UiPageCssInline.render[TypedTag[String]],
  head(
...

在该HTML中定义的ScalaTags元素中，我可以轻松应用CSS规则，例如：

    div(UiPageCssInline.logoStyle)(
...

但是，我还使用Scala.js（即js.dom）在页面加载时修改HTML。我无法弄清楚如何在那里类似地应用CSS规则。我收到编译错误，例如：

type mismatch;
[error]  found   : scalacss.StyleA
[error]  required: scalatags.JsDom.Modifier
[error]     (which expands to)  scalatags.generic.Modifier[org.scalajs.dom.raw.Element]
[error]   val focusedNodeInfoBox = div(UiPageCssInline.focusedNodeInfoStyle)().render
[error]                                                ^

如何将内联CSS应用于动态创建的元素？这应该工作（也许我只是搞砸了SBT依赖）？我可以用这种方式使用ScalaCSS生成的内联规则吗？

如果没有，如果我不希望构建和导出必须显式加载的单独样式表，那么还有什么选择呢？（或者是人们这样做的方式？）

Answer 1

你需要这个导入

import scalacss.ScalatagsCss._ //this will do all magic using implicits

如果你没有添加ext-scalatags模块，那么你也必须添加那个

libraryDependencies += "com.github.japgolly.scalacss" %%% "ext-scalatags" % "0.2.0"

之后

div(UiPageCssInline.logoStyle)

编译正常：）

官方文件： https://japgolly.github.io/scalacss/book/ext/scalatags.html

Answer 2

啊，看起来我需要使用这样的语法：

div( cls := UiPageCssInline.focusedNodeInfoStyle.htmlClass).render

如何将ScalaCSS应用于Scala.js JS.DOM元素？

2 个答案: