How to change the style of a nested control in tornadofx - javafx

Question

A textarea in JavaFx can have a background color assigned in css:
.text-area .content {
-fx-background-color: blue ;
}
How do I do this in tornadoFx within a style declaration ?
override val root = gridpane {
orderTextArea = textarea {
isEditable = false
prefWidth = 900.0
prefHeight = 700.0
isWrapText = true
//textProperty().bind(viewModel.orderText)
style {
textFill = Color.YELLOW
**//backgroundcolor**
}
}

Answer 1

You have two options here:
Create a stylesheet and describe the correct selector there
Locate the sub node and apply the style to it directly
No 2 is not recommended, because you have no guarantee for when the control actually instantiates that sub node. TornadoFX has two ways of doing no 1.
You can create a type safe stylesheet and add the reference to it to your app class. The stylesheet would look like this:
class Styles : Stylesheet() {
init {
textArea {
content {
backgroundColor += Color.BLUE
}
}
}
}
As I mentioned, there is another option in TornadoFX, and that is to create an inline stylesheet. This is not an inline style, but a complete stylesheet that will only be applied to the node you define it on (and it's sub nodes of course)
textarea {
prefWidth = 900.0
prefHeight = 700.0
stylesheet {
Stylesheet.content {
backgroundColor += Color.BLUE
}
}
}
Notice that you need to reference the defined CSS classes in Stylesheet.
Creating an external type safe stylesheet is always the best option.