ScalaCSS

scalajs-react

1. Add this to your SBT build:

   libraryDependencies += "com.github.japgolly.scalacss" %%% "ext-react" % "0.8.0-RC1"

2. Add this to Scala where you want ScalaCSS to integrate with your React code.

   import scalacss.ScalaCssReact._
   

3. Create your inline styles as normal.

4. At the beginning of your Scala.JS app, before using any React components, create the inline styles by calling .addToDocument() on your stylesheet.

   MyStyles.addToDocument()
   

   If you're using GlobalRegistry, do this:

   GlobalRegistry.addToDocumentOnRegistration()
   

5. Finally, to apply styles, just reference them in your tags.

   <.h1( MyStyles.heading, "This is a heading" )
   

Example

example/package.scala

package object example {
  val CssSettings = scalacss.devOrProdDefaults
}

example/MyStyles.scala

package example

import CssSettings._

object MyStyles extends StyleSheet.Inline {
  import dsl._

  val bootstrapButton = style(
    addClassName("btn btn-default"),
    fontSize(200 %%)
  )
}

example/MyApp.scala

package example

import scala.scalajs.js.annotation.JSExport
import org.scalajs.dom.{alert, document}
import japgolly.scalajs.react._
import japgolly.scalajs.react.vdom.prefix_<^._
import CssSettings._
import scalacss.ScalaCssReact._

object MyApp {

  val MyComponent =
    ReactComponentB[Unit]("blah")
      .render(_ =>
        <.button(
          ^.onClick --> alert("Hey! I didn't say you could click me!"),
          MyStyles.bootstrapButton,
          "I am a button!"))
      .buildU


  @JSExport("app")
  def main(): Unit = {
    MyStyles.addToDocument()
    MyComponent() render document.getElementById("demo")
  }
}