JavaFX 8: setting style for inner VBox doesn't apply

Question

I'm developing a chat and decided to stick to the following structure:

All the chat messages consist of an outer VBox and inner VBox ( chatBlock ). Inner VBox contains Pane with Label blocks. One Pane + Label block is for nickname, and another one is for the message.

So I want to colorize nickname panel and message panel separately. But setStyle() works only for inner VBox. Here is the code of what I'm trying to do:

public class ChatMessageBlock extends VBox {
    private VBox chatBlock = new VBox();
    private Pane nickNameBox = new Pane();
    private Label nickname;
    private Pane messageBox = new Pane();
    private Label message;

    public ChatMessageBlock(String nickname, String message) {
        this.nickname = new Label(nickname);
        this.message = new Label(message);
        this.message.setWrapText(true);
        initGUI();
    }

    private void initGUI() {
        nickNameBox.setStyle("-fx-background-color: red"); //DOESN'T WORK
        messageBox.setStyle("-fx-background-color: green"); //DOESN'T WORK
//        chatBlock.setStyle("-fx-background-color: blue"); //WORK
        nickNameBox.getChildren().add(nickname);
        messageBox.getChildren().add(message);
        chatBlock.getChildren().addAll(nickname, message);
        this.getChildren().add(chatBlock);
    }
}

How to achieve colorization of separate blocks inside VBox panel?

Answer 1

Try this:

nickNameBox.setStyle("-fx-background-color: #992222;");

EDIT:

You should add nickNameBox and messageBox to the VBox. These are not related to anything.

for example write these lines before this.getChildren().add(chatBlock); in initGUI():

this.getChildren().add(nickNameBox);
this.getChildren().add(messageBox);