Style a regular javafx button and text-field?

Question

I'm using Time-4j-ui library, and somehow it includes a built-in Button and a text box which is Ugly and ruins all my design,

In my project I'm using Jfoenix material design components, and this built-in user-interface completely ruins my design, here is a view

I want to know if there is a way or some kind of hack to style this date-picker to JFXDatePicker, You can see JFXDatePicker in below:

However I managed to access first child of this view-group(which is the text-box) with picker.getChildren().get(0);, but I don't know if there is a way to style the text-box or something?

Thanks in advance

Answer 1

You can style elements with CSS: The simple way is to use it directly, Like this:

Node node = picker.getChildren().get(0);
node.setStyle("-fx-border-color: #000;-fx-border-width: 2px;");

Or you can specify an external css file and use it, This way:

Node node = picker.getChildren().get(0);
node.getStyleClass().add("myTextBox");
picker.getStylesheets().add("main.css");

/*main.css:*/
.myTextBox{
  -fx-border-color: #000;
  -fx-border-width: 2px;
}