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

Question

我在玩Scala.js、ScalaTags和ScalaCSS。

我了解了如何使用ScalaCSS创建内联StyleSheet，以及如何将CSS规则应用于ScalaTags元素。我正在使用ScalaTags在服务器中生成基本的框架HTML页面，要访问我的CSS，我需要如下内容：

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

在该超文本标记语言中定义的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