JavaFX8 DatePicker Изменение размера кнопки

Question

Я использую JavaFX DatePicker со стилем по умолчанию.

Однако я хочу применить CSS-стилизацию ко всем кнопкам в этом Scene, добавив scene.getStyleSheets().add("abc.css").

Itработал нормально, и я применил:

Button {
    -fx-font-size: 20;
    -fx-font-family: "Arial";
    -fx-pref-width: 300;
    -fx-pref-height: 60;
    -fx-background-radius: 16px;
    -fx-background-color: lightgrey;
    -fx-text-fill: black;
}

Однако проблема возникает, когда я добавил DatePicker.DatePicker имеет свои собственные кнопки со стрелками, которые предназначены для переключения месяца или года.Я хочу использовать стиль по умолчанию для этого DatePicker, но так как он находится под моим Scene, его кнопки получают стиль кнопок из CSS ... (толстые кнопки)

Есть ли способ для меняудалить стиль кнопки из DatePicker, чтобы использовать стиль по умолчанию DatePicker?Я не хочу удалять все стили из этой сцены, так как я должен применить все остальные самостоятельно.

Вот фотография:

Answer 1

Это не совсем правильное решение, но в качестве обходного пути вы могли бы унаследовать ваши стили javaFX для всплывающего элемента управления выбора даты

Если вы добавите это в свой abc.css, кнопки будут обычными по умолчанию

.date-picker-popup > * > .spinner > .button {
    -fx-background-color: transparent;
    -fx-background-radius: 0;
    -fx-pref-width: -1;
    -fx-pref-height: -1;
}

Answer 2

К сожалению, нет способа предотвратить применение стиля к узлам с определенным предком.Это требует, чтобы вы

• нашли способ ограничить узлы, к которым применяется ваш стиль, таким образом, чтобы не изменять потомков, например, DatePicker или
• сброситьсвойства, которые вы изменили до значений modena.css, применяются к ним.

Для второго варианта вы можете использовать

Button {
    -fx-font-size: 20;
    -fx-font-family: "Arial";
    -fx-pref-width: 300;
    -fx-pref-height: 60;
    -fx-background-radius: 16px;
    -fx-background-color: lightgrey;
    -fx-text-fill: black;
}

.date-picker-popup > * > .spinner > .button {
    -fx-font-size: 1em;
    -fx-font-family: "System";
    -fx-pref-width: -1;
    -fx-pref-height: -1;
    -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
    -fx-background-radius: 0;
}

.date-picker-popup > * > .spinner > .button:focused {
    -fx-background-color: -fx-focus-color, -fx-inner-border, -fx-body-color, -fx-faint-focus-color, -fx-body-color;
}

Однако обратите внимание, что это необходимо сделать для каждого стандартного элемента управления, использующего кнопку.Добавление способа выбора кнопок, которые вы хотите стилизовать, может быть намного проще.Например, вы можете добавить класс стилей к кнопкам, которые хотите стилизовать:

button.getStyleClass().add("my-style");

Button.my-style {
    -fx-font-size: 20;
    -fx-font-family: "Arial";
    -fx-pref-width: 300;
    -fx-pref-height: 60;
    -fx-background-radius: 16px;
    -fx-background-color: lightgrey;
    -fx-text-fill: black;
}