CODEWITHSUNDEEP
cssscala.js
Steve Rehrauer
Steve Rehrauer

Reputation: 157

How to apply ScalaCSS to Scala.js JS.DOM elements?

I'm playing with Scala.js, ScalaTags, and ScalaCSS.

I see how to create an inline StyleSheet with ScalaCSS, and how to apply CSS rules to ScalaTags elements. I'm generating the basic, skeletal HTML page in the server using ScalaTags, and to access my CSS I have something like:

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

In the ScalaTags elements defined in that HTML, I can easily apply CSS rules, like:

    div(UiPageCssInline.logoStyle)(
...

But, I also use Scala.js (i.e., js.dom) to modify the HTML when the page loads. And I can't figure out how to similarly apply CSS rules there. I get compilation errors, such as:

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]                                                ^

How does one apply inline CSS to dynamically-created elements? Should this work (perhaps I simply have screwed up SBT dependencies)? Can I use ScalaCSS-generated inline rules in this manner?

If not, what's the alternative if I don't wish to build and export a separate stylesheet that must be explicitly loaded? (Or is that the way people do this?)

Upvotes: 2

Views: 1145

Answers (2)

invariant
invariant

Reputation: 8900

you need this import

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

if you didn't added ext-scalatags module then you must add that one also 

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

after that 

div(UiPageCssInline.logoStyle)

will compile fine :)

Official Doc : https://japgolly.github.io/scalacss/book/ext/scalatags.html

Upvotes: 1

Steve Rehrauer
Steve Rehrauer

Reputation: 157

Ah, looks like I need to use syntax like this instead:

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

Upvotes: 0

Related Questions