ScalaCSS

scalajs-react

  1. Add this to your SBT build:

    libraryDependencies += "com.github.japgolly.scalacss" %%% "ext-react" % "0.5.1"
  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

MyStyles.scala

import scalacss.Defaults._

object MyStyles extends StyleSheet.Inline {
  import dsl._

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

MyApp.scala

import scala.scalajs.js.annotation.JSExport
import org.scalajs.dom.{alert, document}
import japgolly.scalajs.react._
import japgolly.scalajs.react.vdom.prefix_<^._
import scalacss.Defaults._
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")
  }
}