如何用CSS修改Gluon Mobile JavaFX中导航抽屉项标题的字体大小？

要修改Gluon Mobile中NavigationDrawer项的标题样式（比如字体大小），关键是定位到正确的CSS选择器，以下是具体实现步骤：

1. 定位目标CSS选择器 #

Gluon的NavigationDrawer.Item组件内部的标题是一个Label节点，对应的CSS结构为：

• 抽屉项根类：.navigation-drawer-item
• 内部标题Label：.navigation-drawer-item > .label

2. 编写自定义CSS规则 #

在项目CSS文件中添加以下规则，按需调整样式属性：

/* 基础状态下的标题样式 */
.navigation-drawer-item > .label {
    -fx-font-size: 16px; /* 自定义字体大小 */
    -fx-text-fill: #2d3436; /* 文字颜色 */
    -fx-font-family: "Segoe UI"; /* 字体 */
}

/* 选中状态下的标题样式（可选） */
.navigation-drawer-item:selected > .label {
    -fx-font-size: 18px;
    -fx-text-fill: #0984e3;
    -fx-font-weight: bold;
}

如果遇到预设主题覆盖样式的情况，可临时使用!important（不推荐长期依赖）提高优先级：

.navigation-drawer-item > .label {
    -fx-font-size: 16px !important;
}

3. 在项目中加载CSS文件 #

将CSS文件放在src/main/resources/css目录下，可通过两种方式加载：

单个View内加载 #

@Override
public void initialize() {
    getStylesheets().add(getClass().getResource("/css/your-styles.css").toExternalForm());
}

全局加载（应用于所有View） #

@Override
public void init() {
    addViewFactory(HOME_VIEW, HomeView::new);
    Application.getInstance().getStylesheets().add(
        getClass().getResource("/css/your-styles.css").toExternalForm()
    );
}

内容的提问来源于stack exchange，提问作者Joseph Sekwa