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

【问题标题】：How to apply ScalaCSS to Scala.js JS.DOM elements?如何将 ScalaCSS 应用于 Scala.js JS.DOM 元素？
【发布时间】：2015-06-03 19:27:37
【问题描述】：

我正在使用 Scala.js、ScalaTags 和 ScalaCSS。

我了解了如何使用 ScalaCSS 创建内联样式表，以及如何将 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 生成的内联规则吗？

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

【问题讨论】：

标签： css scala.js

【解决方案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

【讨论】：

【解决方案2】：

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

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

【讨论】：