How to style MFXTreeView

[infinite-dev22]

I want to style MFX's treeview, set a background for it but this seems to fail to work well.
I have tried styling the ScrollPane in it and also the virtualflow(Suspected it was the hinderance in my way) but all in vain.
I am using the TreeView as my side navbar.
I want it to look like this(Plain JavaFX TreeView but has no animations)

Currently I am having this(MFXTreeView with animations)

Edit

MRE
Nav.java

record Nav(
        String title, @Nullable Node graphic, BorderPane view, @Nullable List<String> searchKeywords) {

    // Treeview parent not.
    public static final Nav ROOT = new Nav("ROOT", null, null, null);

    public Nav {
        Objects.requireNonNull(title, "title");
        searchKeywords = Objects.requireNonNullElse(searchKeywords, Collections.emptyList());
    }

    public boolean isGroup() {
        return Objects.equals(view, null);
    }

    public boolean isMainPage() {
        return !Objects.equals(view, null) && !Objects.equals(graphic, null);
    }

    public boolean matches(String filter) {
        Objects.requireNonNull(filter);
        return contains(title, filter)
                || (searchKeywords != null
                && searchKeywords.stream().anyMatch(keyword -> contains(keyword, filter)));
    }

    private boolean contains(@NotNull String text, @NotNull String filter) {
        return text.toLowerCase().contains(filter.toLowerCase());
    }
}

NavTree.java

public class NavTree extends MFXTreeView<Nav> {
    public static final double SIDEBAR_WIDTH = 250.0;
    public static final String EDGE_TO_EDGE = "edge-to-edge";
    static ChangeListener<Boolean> expandedListener;
    static Navigation navigation;

    public NavTree(Navigation navigation) {
        super();
        expandedListener =
                (obs, wasExpanded, isNowExpanded) -> {
                    if (isNowExpanded) {
                        ReadOnlyProperty<?> expandedProperty = (ReadOnlyProperty<?>) obs;
                        Object itemThatWasJustExpanded = expandedProperty.getBean();
                        for (AbstractMFXTreeItem<Nav> item : getRoot().getItems()) {
                            if (item != itemThatWasJustExpanded) {
                                item.setStartExpanded(false);
                            }
                        }
                    }
                };

        NavTree.navigation = navigation;

        getStyleClass().addAll(EDGE_TO_EDGE);
        setShowRoot(false);
        rootProperty().bind(navigation.navTreeProperty());
    }

    public static final class NavTreeCell<T> extends AbstractMFXTreeCell<T> {
        private static final PseudoClass GROUP = PseudoClass.getPseudoClass("group");
        private final AbstractMFXTreeItem<T> item;

        public NavTreeCell(AbstractMFXTreeItem<T> item) {
            super(item);
            this.initialize();
            this.item = item;
            getStyleClass().add("nav-tree-cell");
        }

        private void initialize() {
            this.getStyleClass().add("mfx-tree-cell");
            this.defaultDisclosureNode();
            this.getChildren().add(1, new Spacer());
            this.getChildren().add(2, this.getDisclosureNode());
            this.disclosureNode.addListener((observable, oldValue, newValue) -> {
                if (!newValue.equals(oldValue)) {
                    this.getChildren().set(1, new Spacer());
                    this.getChildren().set(2, (Node) newValue);
                }

            });
            this.sceneBuilderIntegration();
        }

        @Override
        protected void defaultDisclosureNode() {
            MFXIconWrapper disclosureNode = (new MFXIconWrapper()).defaultRippleGeneratorBehavior();
            disclosureNode.getStyleClass().setAll(new String[]{"disclosure-node"});
            disclosureNode.setSize(22.0);
            NodeUtils.makeRegionCircular(disclosureNode, 9.5);
            this.setDisclosureNode(disclosureNode);
        }

        @Override
        public Node getDisclosureNode() {
            return (MFXIconWrapper) this.disclosureNode.get();
        }

        @Override
        public <N extends Node> void setDisclosureNode(N node) {
            this.disclosureNode.set(node);
        }

        @Override
        protected void render(T data) {

            Label titleLabel = new Label();
            titleLabel.getStyleClass().add("title");

            Label tagLabel = new Label("");
            tagLabel.getStyleClass().add("tag");

            HBox root = new HBox();
            root.setAlignment(Pos.CENTER_LEFT);
            root.setPadding(new Insets(20));
            root.getChildren().setAll(new Spacer(), titleLabel, new Spacer(), tagLabel, new Spacer());
//            root.setCursor(Cursor.HAND);
            root.getStyleClass().add("container");
            root.setMaxWidth(SIDEBAR_WIDTH - 10);
            setPrefWidth(root.getPrefWidth());


            root.setPrefHeight(getPrefHeight());

            setOnMouseClicked(
                    e -> {
                        if (!(item instanceof NavTreeItem navTreeItem)) {
                            return;
                        }

                        if (navTreeItem.isGroup() && e.getButton() == MouseButton.PRIMARY) {
                            navTreeItem.setExpanded(!navTreeItem.isExpanded());
                        }
                        if (!navTreeItem.isGroup()) {
                            navigation.navigate(navTreeItem.view());
                        }
                        if (navTreeItem.isGroup()) {
                            navTreeItem.expandedProperty().addListener(expandedListener);
                        }
                    });
            setCursor(Cursor.HAND);

            if (data instanceof Node) {
                this.getChildren().add((Node) data);
            } else {
                var nav = (Nav) data;
                titleLabel.setGraphic(nav.graphic());
                titleLabel.setText(nav.title());
                titleLabel.getStyleClass().add("data-label");
                this.getChildren().add(root);
                pseudoClassStateChanged(GROUP, nav.isGroup());
            }
        }

        @Override
        public void updateCell(MFXTreeItem<T> item) {
            MFXIconWrapper disclosureNode = (MFXIconWrapper) this.getDisclosureNode();
            if (!item.getItems().isEmpty()) {
                MFXFontIcon icon = new MFXFontIcon();
                icon.getStyleClass().add("disclosure-icon");
                disclosureNode.setIcon(icon);
            } else {
                disclosureNode.removeIcon();
            }

            if (item.isStartExpanded()) {
                disclosureNode.setRotate(90.0);
            }
        }

        @Override
        public Theme getTheme() {
            return MaterialFXStylesheets.TREE_CELL;
        }
    }

    public static final class NavTreeItem extends MFXTreeItem<Nav> {
        private final Nav nav;

        public NavTreeItem(Nav nav) {
            super(nav);
            this.nav = Objects.requireNonNull(nav, "nav");
            setCellFactory(p -> new NavTreeCell<Nav>(this));
        }


        /**
         * Treeview root item.
         *
         * @return NavTreeItem
         */
        @Contract(" -> new")
        public static @NotNull NavTreeItem root() {
            return new NavTreeItem(Nav.ROOT);
        }

        /**
         * Nested treeview.
         *
         * @param title display name on treeview item.
         * @param icon  display icon on treeview item.
         * @return NavTreeItem
         */
        public static @NotNull NavTreeItem group(String title, String icon) {
            MFXIconWrapper wrapper = new MFXIconWrapper(icon, 24, 32);
            return new NavTreeItem(new Nav(title, wrapper, null, null));
        }

        /**
         * Treeview item without child treeview items.
         *
         * @param title display name on treeview item.
         * @param icon  display icon on treeview item.
         * @param view  node to display on treeview item clicked.
         * @return NavTreeItem
         */
        public static @NotNull NavTreeItem mainPage(String title, String icon, BorderPane view) {
            MFXIconWrapper wrapper = new MFXIconWrapper(icon, 24, 32);
            return new NavTreeItem(new Nav(title, wrapper, view, null));
        }

        /**
         * Child treeview item of nested treeview.
         *
         * @param title display name on treeview item.
         * @param view  node to display on treeview item clicked.
         * @return NavTreeItem
         */
        @Contract("_, _ -> new")
        public static @NotNull NavTreeItem page(String title, BorderPane view) {
            return new NavTreeItem(new Nav(title, null, view, null));
        }

        /**
         * Child treeview item of nested treeview that can be searched.
         *
         * @param title display name on treeview item.
         * @param view  node to display on treeview item clicked.
         * @return NavTreeItem
         */
        @Contract("_, _, _ -> new")
        public static @NotNull NavTreeItem page(String title, BorderPane view, String... searchKeywords) {
            return new NavTreeItem(new Nav(title, null, view, List.of(searchKeywords)));
        }

        public @Nullable BorderPane view() {
            return nav.view();
        }

        public boolean isGroup() {
            return nav.isGroup();
        }

        public boolean isMainPage() {
            return nav.isMainPage();
        }
    }
}

Spacer.java

public class Spacer extends Region {

    /** Creates a new horizontally oriented Spacer that expands to fill remaining space. */
    public Spacer() {
        this(Orientation.HORIZONTAL);
    }

    /**
     * Creates a new Spacer with the given orientation that expands to fill remaining space.
     *
     * @param orientation The orientation of the spacer.
     */
    public Spacer(Orientation orientation) {
        super();

        switch (orientation) {
            case HORIZONTAL -> HBox.setHgrow(this, Priority.ALWAYS);
            case VERTICAL -> VBox.setVgrow(this, Priority.ALWAYS);
        }
    }

    /**
     * Creates a new Spacer with the fixed size.
     *
     * @param size The size of the spacer.
     */
    public Spacer(double size) {
        this(size, Orientation.HORIZONTAL);
    }

    /**
     * Creates a new Spacer with the fixed size and orientation.
     *
     * @param size The size of the spacer.
     * @param orientation The orientation of the spacer.
     */
    public Spacer(double size, Orientation orientation) {
        super();

        switch (orientation) {
            case HORIZONTAL -> {
                setMinWidth(size);
                setPrefWidth(size);
                setMaxWidth(size);
            }
            case VERTICAL -> {
                setMinHeight(size);
                setPrefHeight(size);
                setMaxHeight(size);
            }
        }
    }
}

Navigation.java

public class Navigation {
    static final int PAGE_TRANSITION_DURATION = 300;
    private static final Map<String, NavTree.NavTreeItem> NAV_TREE = createNavItems();
    private static StackPane viewWindow;
    private static Navigation instance;
    private final ReadOnlyObjectWrapper<NavTree.NavTreeItem> navTree =
            new ReadOnlyObjectWrapper<>(createTree());

    private Navigation(StackPane viewWindow) {
        Navigation.viewWindow = viewWindow;
    }

    public static Navigation getInstance(StackPane viewWindow) {
        if (instance == null) {
            instance = new Navigation(viewWindow);
            instance.loadView(Pages.getDashboardPane());
        }
        return instance;
    }

    public static @NotNull Map<String, NavTree.NavTreeItem> createNavItems() {
        var map = new HashMap<String, NavTree.NavTreeItem>();
        // Sale
        map.put("SALE", NavTree.NavTreeItem.page("Sale", Pages.getSalePane()));
        map.put("POINT_OF_SALE", NavTree.NavTreeItem.page("Point Of Sale", Pages.getPosPane()));
        map.put("SALE_TERMS", NavTree.NavTreeItem.page("Sale Terms", Pages.getSalesTermPane()));

        map.put("CATEGORY", NavTree.NavTreeItem.page("Category", Pages.getProductCategoryPane()));
        map.put("BRAND", NavTree.NavTreeItem.page("Brand", Pages.getBrandPane()));
        map.put("UNIT", NavTree.NavTreeItem.page("Unit", Pages.getUnitPane()));
        map.put("PRODUCTS", NavTree.NavTreeItem.page("Products", Pages.getProductPane()));
        map.put("ADJUSTMENTS", NavTree.NavTreeItem.page("Adjustments", Pages.getAdjustmentPane()));
        map.put("QUOTATIONS", NavTree.NavTreeItem.page("Quotations", Pages.getQuotationPane()));

        map.put("SALE RETURN", NavTree.NavTreeItem.page("Sales", Pages.getSaleReturnPane()));
        map.put("PURCHASE RETURN", NavTree.NavTreeItem.page("Purchases", Pages.getPurchaseReturnPane()));

        map.put(
                "EXPENSE CATEGORY", NavTree.NavTreeItem.page("Category", Pages.getExpenseCategoryPane()));
        map.put("EXPENSE", NavTree.NavTreeItem.page("Expenses", Pages.getExpensePane()));

        map.put("SUPPLIER", NavTree.NavTreeItem.page("Suppliers", Pages.getSupplierPane()));
        map.put("USER", NavTree.NavTreeItem.page("Users", Pages.getUserPane()));

        return map;
    }

    public static void navigate(Pane view, Pane viewWindow) {
        loadIntoView(view, viewWindow);
    }

    private static void loadIntoView(Pane view, Pane viewWindow) {
        try {
            final Pane prevWindow =
                    (Pane)
                            viewWindow.getChildren().stream()
                                    .filter(c -> c instanceof Pane)
                                    .findFirst()
                                    .orElse(null);
            final Pane nextWindow = view;
            Pane existingNextChild =
                    (Pane)
                            viewWindow.getChildren().stream().findAny().filter(c -> c.equals(view)).orElse(null);

            if (Objects.equals(prevWindow, nextWindow)) return;

            if (viewWindow.getChildren().isEmpty()) {
                viewWindow.getChildren().add(nextWindow);
                return;
            } else if (!Objects.equals(existingNextChild, null)) {
                var transition =
                        new FadeTransition(Duration.millis(PAGE_TRANSITION_DURATION), existingNextChild);
                transition.setFromValue(0.0);
                transition.setToValue(1.0);
                transition.setOnFinished(
                        event -> viewWindow.getChildren().get((int) existingNextChild.getViewOrder()).toFront());
                transition.play();
                return;
            }

            Objects.requireNonNull(prevWindow);

            viewWindow.getChildren().add(nextWindow);
            viewWindow.getChildren().remove(prevWindow);
            var transition = new FadeTransition(Duration.millis(PAGE_TRANSITION_DURATION), nextWindow);
            transition.setFromValue(0.0);
            transition.setToValue(1.0);
            transition.setOnFinished(event -> nextWindow.toFront());
            transition.play();
        } catch (RuntimeException e) {
            SpotyLogger.writeToFile(e, Navigation.class);
        }
    }

    public ReadOnlyObjectProperty<NavTree.NavTreeItem> navTreeProperty() {
        return navTree.getReadOnlyProperty();
    }

    public TreeView<Nav> createNavigation() {
        return new NavTree(this);
    }

    private NavTree.@NotNull NavTreeItem createTree() {
        var dashboard =
                NavTree.NavTreeItem.mainPage("Dashboard", "fas-chart-simple", Pages.getDashboardPane());

        var sale = NavTree.NavTreeItem.group("Sale", "fas-cash-register");
        sale
                .getChildren()
                .setAll(
                        NAV_TREE.get("SALE"),
                        NAV_TREE.get("POINT_OF_SALE"),
                        NAV_TREE.get("SALE_TERMS"));

        var customers =
                NavTree.NavTreeItem.mainPage("Customers", "fas-users", Pages.getCustomerPane());

        var suppliers =
                NavTree.NavTreeItem.mainPage("Suppliers", "fas-users", Pages.getSupplierPane());

        var product = NavTree.NavTreeItem.group("Product", "fas-cubes");
        product
                .getChildren()
                .setAll(
                        NAV_TREE.get("CATEGORY"),
                        NAV_TREE.get("BRAND"),
                        NAV_TREE.get("UNIT"),
                        NAV_TREE.get("PRODUCTS"),
                        NAV_TREE.get("ADJUSTMENTS"),
                        NAV_TREE.get("QUOTATIONS"));

        var purchase =
                NavTree.NavTreeItem.mainPage("Purchases", "fas-cart-plus", Pages.getPurchasePane());

        var requisition =
                NavTree.NavTreeItem.mainPage(
                        "Requisitions", "fas-hand-holding", Pages.getRequisitionPane());
        var transfer =
                NavTree.NavTreeItem.mainPage(
                        "Transfers", "fas-arrow-right-arrow-left", Pages.getTransferPane());
        var stockIn =
                NavTree.NavTreeItem.mainPage("Stock In", "fas-cart-flatbed", Pages.getStockInPane());
        var returns = NavTree.NavTreeItem.group("Returns", "fas-retweet");
        returns.getChildren().setAll(NAV_TREE.get("SALE RETURN"), NAV_TREE.get("PURCHASE RETURN"));

        var expense = NavTree.NavTreeItem.group("Expenses", "fas-wallet");
        expense.getChildren().setAll(NAV_TREE.get("EXPENSE CATEGORY"), NAV_TREE.get("EXPENSE"));

        var people = NavTree.NavTreeItem.group("People", "fas-users");
        people
                .getChildren()
                .setAll(NAV_TREE.get("USER"));

        var root = NavTree.NavTreeItem.root();
        root.getChildren()
                .addAll(
                        dashboard,
                        sale,
                        customers,
                        suppliers,
                        product,
                        purchase,
                        requisition,
                        transfer,
                        stockIn,
                        returns,
                        expense,
                        people);
        return root;
    }

    public void navigate(BorderPane view) {
        loadView(view);
    }

    private void loadView(BorderPane view) {
        try {
            final BorderPane prevWindow =
                    (BorderPane)
                            viewWindow.getChildren().stream()
                                    .filter(c -> c instanceof BorderPane)
                                    .findFirst()
                                    .orElse(null);
            final BorderPane nextWindow = view;
            BorderPane existingNextChild =
                    (BorderPane)
                            viewWindow.getChildren().stream().findAny().filter(c -> c.equals(view)).orElse(null);

            if (Objects.equals(prevWindow, nextWindow)) return;

            if (viewWindow.getChildren().isEmpty()) {
                viewWindow.getChildren().add(nextWindow);
                return;
            } else if (!Objects.equals(existingNextChild, null)) {
                var transition =
                        new FadeTransition(Duration.millis(PAGE_TRANSITION_DURATION), existingNextChild);
                transition.setFromValue(0.0);
                transition.setToValue(1.0);
                transition.setOnFinished(
                        t -> viewWindow.getChildren().get((int) existingNextChild.getViewOrder()).toFront());
                transition.play();
                return;
            }

            Objects.requireNonNull(prevWindow);

            viewWindow.getChildren().add(nextWindow);
            viewWindow.getChildren().remove(prevWindow);
            var transition = new FadeTransition(Duration.millis(PAGE_TRANSITION_DURATION), nextWindow);
            transition.setFromValue(0.0);
            transition.setToValue(1.0);
            transition.setOnFinished(t -> nextWindow.toFront());
            transition.play();
        } catch (RuntimeException e) {
            SpotyLogger.writeToFile(e, Navigation.class);
        }
    }
}

Pages.java

public class Pages {
    """
    Pages class to initialize fxml files in Splash screen.
    """

    // Dashboard FXML
    private static final FXMLLoader dashboardLoader = fxmlLoader("fxml/dashboard/Dashboard.fxml");

    // Dashboard pane
    private static BorderPane dashboardPane;

    // Initialize dashboard fxml file in Splash screen
    private static void setDashboard() {
        dashboardLoader.setControllerFactory(e -> new DashboardController());
    }

    // Get dashboard pane
    public static BorderPane getDashboardPane() {
        return dashboardPane;
    }
}

MainController.java

public class MainController implements Initializable {
    public static Navigation navigation;
    private static MainController instance;
    public final Stage primaryStage;
    @FXML
    public StackPane contentPane;
    @FXML
    public StackPane navBar;

    private MainController(Stage stage) {
        this.primaryStage = stage;
    }

    public static MainController getInstance(Stage stage) {
        if (instance == null) instance = new MainController(stage);
        return instance;
    }

    @Override
    public void initialize(URL location, ResourceBundle resources) {
        initializeLoader();
    }

    public void initializeLoader() {
        navigation = Navigation.getInstance(contentPane);
        navBar.getChildren().add(navigation.createNavigation());
    }
}

MyApplication.java

public class MyApplication extends Application {
    public static void main(String[] args) {
        launch();
    }

    @Override
    public void start(Stage stage) throws IOException {
        UserAgentBuilder.builder()
                .themes(JavaFXThemes.MODENA)
                .themes(MaterialFXStylesheets.forAssemble(true))
                .setDeploy(true)
                .setResolveAssets(true)
                .build()
                .setGlobal();

        FXMLLoader fxmlLoader = new FXMLLoader(MyApplication.class.getResource("main.fxml"));
        Scene scene = new Scene(fxmlLoader.load(), 320, 240);
        scene.getStylesheets().add(MyApplication.class.getResource("main.css").toExternalForm());
        stage.setTitle("Hello!");
        stage.setScene(scene);
        stage.show();
    }
}

main.fxml

<AnchorPane xmlns:fx="http://javafx.com/fxml/1" fx:id="rootPane" prefHeight="32767" prefWidth="32767"
            styleClass="rootPane" stylesheets="@../styles/base.css" xmlns="http://javafx.com/javafx/19"
            fx:controller="org.infinite.spoty.views.BaseController">
    <VBox layoutX="6.0" layoutY="6.0" prefHeight="640.0" prefWidth="194.0" spacing="10.0" styleClass="sidebar"
          AnchorPane.bottomAnchor="5.0" AnchorPane.leftAnchor="5.0" AnchorPane.topAnchor="5.0">
        <Pane prefHeight="31.0" prefWidth="197.0"/>
        <StackPane fx:id="navBar" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308"
                   styleClass="navbar" VBox.vgrow="ALWAYS"/>
    </VBox>
    <StackPane fx:id="contentPane" layoutX="226.0" layoutY="45.0" prefHeight="604.0" prefWidth="1053.0"
               AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="203.0" AnchorPane.rightAnchor="0.0"
               AnchorPane.topAnchor="70.0"/>
        <styleClass>
            <String fx:value="navbar"/>
            <String fx:value="appBar"/>
        </styleClass>
    </HBox>
</AnchorPane>

main.css

/**************************************************
 * Sidebar
**************************************************/
.rootPane .sidebar {
	-fx-background-color: -mfx-charcoal;
	-fx-background-radius: 10;
	-fx-border-radius: 10;
}

.rootPane .sidebar .header {
	-fx-font-family: 'Visby Round CF Heavy';
	-fx-font-size: 26;
	-fx-text-fill: white;
}

.rootPane .sidebar .header .mfx-font-icon {
	-mfx-color: -mfx-black;
}

.rootPane .sidebar .mfx-scroll-pane {
	-fx-background-color: transparent;

	-track-color: rgba(255, 255, 255, 0.3);
	-thumb-color: white;
	-thumb-hover-color: white;
}

.rootPane .sidebar .menu-label {
	-fx-font-family: 'Visby Round CF Bold';
	-fx-font-size: 14;
	-fx-text-fill: white;
}

                                      /*TREE VIEW NAV STYLING.*/
.rootPane .sidebar .navbar .mfx-tree-view {
    -fx-insets: 0;
    -fx-border-insets: 0;
    -fx-background-insets: 1;
	-fx-background-color: -mfx-charcoal;
	-fx-fill: #e3e7e9;
	-fx-text-fill: #e3e7e9;
}

.rootPane .sidebar .navbar .mfx-tree-view .mfx-tree-cell {
	-fx-background-color: -mfx-charcoal;
	-fx-background-radius: 0;
	-fx-border-radius: 0;
	-fx-pref-height: 40;
	-fx-font-family: 'Visby Round CF Demi Bold';
	-fx-font-size: 13;
	-fx-fill: white;
	-fx-text-fill: white;
}

.nav-tree-cell > .container > .title {
	-fx-background-radius: 0;
	-fx-border-radius: 0;
	-fx-pref-height: 40;
	-fx-font-family: 'Visby Round CF Demi Bold';
	-fx-font-size: 13;
	-fx-fill: white;
	-fx-text-fill: white;
}

.rootPane .sidebar .navbar .mfx-tree-view .mfx-tree-cell:selected {
	-fx-background-radius: 30;
	-fx-background-color: -mfx-selected-nav;
	-fx-fill: -mfx-nav-white-text;
	-fx-text-fill: -mfx-nav-white-text;
	-fx-border-insets: 3 3.5 3 21.1;
	-fx-background-insets: 0 3.5 0 21.1;
}

.nav-tree-cell:selected .container .title {
	-fx-text-fill: -mfx-nav-white-text;
}

.rootPane .sidebar .navbar .mfx-tree-view .mfx-tree-cell .container:hover {
	-fx-background-radius: 30;
	-fx-background-color: -mfx-charcoal-disabled;
	-fx-fill: -mfx-nav-white-text;
	-fx-text-fill: -mfx-nav-white-text;
}

.rootPane .sidebar .navbar .mfx-tree-view .mfx-tree-cell .container {
	-fx-background-radius: 30;
	-fx-fill: -mfx-charcoal;
	-fx-padding: 4 5 4 10;
	-fx-text-fill: -mfx-nav-white-text;
}

 												/*Style group*/
.rootPane .sidebar .navbar .mfx-tree-view .mfx-tree-cell .container:group:selected,
.rootPane .sidebar .navbar .mfx-tree-view .mfx-tree-cell:group:selected {
	-fx-background-radius: 30;
	-fx-background-color: -mfx-charcoal;
	-fx-fill: -mfx-nav-white-text;
	-fx-text-fill: -mfx-nav-white-text;
}
												 /*Style expanded group.*/
.rootPane .sidebar .navbar .mfx-tree-view .mfx-tree-cell:group:expanded {
	-fx-background-radius: 30;
	-fx-background-color: -mfx-charcoal;
	-fx-fill: -mfx-nav-white-text;
	-fx-text-fill: -mfx-nav-white-text;
}

													/*Style group sub item.*/
.rootPane .sidebar .navbar .mfx-tree-view .mfx-tree-cell .container:sub-tree-item {
	-fx-background-radius: 30;
    -fx-fill: -mfx-nav-white-text;
    -fx-text-fill: -mfx-nav-white-text;
    -fx-indent: 35;
}
.rootPane .sidebar .navbar .mfx-tree-view .mfx-tree-cell:selected:sub-tree-item {
	-fx-background-radius: 30;
    -fx-fill: -mfx-nav-white-text;
    -fx-text-fill: -mfx-nav-white-text;
	-fx-border-insets: 3 3.5 3 34;
	-fx-background-insets: 3 3.5 3 34;
}
.rootPane .sidebar .navbar .mfx-tree-view .mfx-tree-cell .container:hover:sub-tree-item {
	-fx-background-radius: 30;
	-fx-background-color: -mfx-charcoal-disabled;
	-fx-fill: -mfx-nav-white-text;
	-fx-text-fill: -mfx-nav-white-text;
	-fx-indent: 35;
}

.nav-tree-cell:group > .container .ikonli-font-icon {
    -fx-fill: grey;
    -fx-background-color: grey;
    -fx-icon-color: grey;
}

.nav-tree-cell:group:expanded {
    -fx-fill: grey;
    -fx-icon-color: grey;
}

.nav-tree-cell:group > .container > .arrow {
    -fx-icon-code: fas-angle-right;
}

.nav-tree-cell:group:expanded > .container > .arrow {
    -fx-icon-code: fas-angle-down;
}

.nav-tree-cell:expanded, .nav-tree-cell:sub-tree-item {
    -fx-background-color: #404040 ;
}

										/*Remove Horizontal scrollbar and other components.*/
.mfx-tree-view *.scroll-bar:horizontal,
.mfx-tree-view *.scroll-bar:horizontal *.track,
.mfx-tree-view *.scroll-bar:horizontal *.track-background,
.mfx-tree-view *.scroll-bar:horizontal *.thumb,
.mfx-tree-view *.row-header-background *.show-hide-rows-button,
.mfx-tree-view *.scroll-bar:horizontal *.increment-button,
.mfx-tree-view *.scroll-bar:horizontal *.decrement-button,
.mfx-tree-view *.scroll-bar:horizontal *.increment-arrow,
.mfx-tree-view *.scroll-bar:horizontal *.decrement-arrow,
.mfx-tree-view *.scroll-bar:vertical,
.mfx-tree-view *.column-header-background *.show-hide-columns-button,
.mfx-tree-view *.scroll-bar:vertical *.increment-button,
.mfx-tree-view *.scroll-bar:vertical *.decrement-button,
.mfx-tree-view *.scroll-bar:vertical *.increment-arrow,
.mfx-tree-view *.scroll-bar:vertical *.decrement-arrow {
    -fx-background-color: transparent;
    -fx-background-radius: 0;
    -fx-background-insets: 0;
    -fx-padding: 0;
}

											/*Style scrollbar track and thumb*/
.mfx-tree-view *.scroll-bar:vertical {
    -fx-unit-increment: 2 ;
    -fx-block-increment: 5 ;
}
.mfx-tree-view *.scroll-bar:vertical *.track,
.mfx-tree-view *.scroll-bar:vertical *.track-background {
    -fx-background-radius: 2.0em;
    -fx-border-radius: 2.0em;
    -fx-padding: 0.2em;
    -fx-background-insets: 4.0, 0.0, 0.0;
}
.mfx-tree-view *.scroll-bar:vertical *.thumb {
    -fx-background-color: derive(#20601cbe, 90.0%);
    -fx-background-insets: 3.0, 0.0, 0.0;
    -fx-background-radius: 2.0em;
}
.mfx-tree-view *.scroll-bar:vertical *.thumb:hover {
    -fx-background-color: derive(#20601cbe, 90.0%);
    -fx-background-insets: 2.5, 0.0, 0.0;
    -fx-background-radius: 2.0em;
}

                                            /*NAV BUTTON STYLES*/
.rootPane .sidebar .navbar .mfx-button .mfx-ripple-generator {
	-mfx-paused: true;
}

.rootPane .sidebar .navbar .mfx-tree-view .mfx-tree-cell .mfx-icon-wrapper .mfx-font-icon {
	-mfx-color: white;
}

.rootPane .sidebar .navbar .mfx-button {
	-fx-background-color: -mfx-charcoal;
	-fx-background-radius: 0;
	-fx-border-color: transparent;
	-fx-border-radius: 0;
	-fx-pref-height: 40;

	-fx-font-family: 'Visby Round CF Demi Bold';
	-fx-font-size: 13;
	-fx-fill: white;
	-fx-text-fill: white;
}

.rootPane .sidebar .navbar .mfx-button:focused .selection-rectangle {
	-fx-stroke: transparent;
	-fx-fill: #601cbe;
}

.rootPane .sidebar .navbar .mfx-button:focused .mfx-icon-wrapper .mfx-font-icon {
	-mfx-color: -mfx-charcoal;
}

.rootPane .sidebar .navbar .mfx-icon-wrapper .mfx-font-icon {
	-mfx-color: -mfx-nav-white-text;
}

.rootPane .sidebar .navbar .mfx-button:hover {
	-fx-background-color: -mfx-charcoal-disabled;
	-fx-background-radius: 30;
	-fx-fill: -mfx-charcoal;
}

.rootPane .sidebar .navbar .mfx-button:focused {
    -fx-background-color: -mfx-selected-nav;
	-fx-background-radius: 30;
    -fx-fill: -mfx-nav-white-text;
    -fx-text-fill: -mfx-nav-white-text;
}

.rootPane .sidebar .navbar .mfx-button:focused .selection-rectangle {
	-fx-stroke: transparent;
	-fx-fill: #601cbe;
}

.rootPane .sidebar .navbar .mfx-button:focused .mfx-icon-wrapper .mfx-font-icon {
	-mfx-color: -mfx-nav-white-text;
}

[palexdev]

Can you give me a MRE please, so I can debug it

[infinite-dev22]

MRE added, Sir.

[infinite-dev22]

MRE provided Sir

[diniramdhni]

TreeView and TreeCell Styling:

.mfx-tree-view {
    -fx-background-color: your_background_color;
}

.mfx-tree-cell {
    -fx-background-color: your_background_color;
    -fx-text-fill: your_text_color;
}

.mfx-tree-cell:selected {
    -fx-background-color: your_selected_color;
    -fx-text-fill: your_selected_text_color;
}

.mfx-tree-cell:hover {
    -fx-background-color: your_hover_color;
}

ScrollBar Styling:

.mfx-tree-view .scroll-bar:vertical {
    -fx-background-color: your_scrollbar_color;
}

.mfx-tree-view .scroll-bar:vertical .thumb {
    -fx-background-color: your_thumb_color;
}

Make sure to change your_background_color, your_text_color, and so on with the colors you want. You may also need to modify additional styles based on the unique needs of your application.

[palexdev]

@infinite-dev22 does the above work for you?

[infinite-dev22]

Thank you @diniramdhni,
Applying the provided css gives me this:

@palexdev it still doesn't style the MFXTreeView