Primefaces 中的样式（p:calendar / datepicker）答案

【问题标题】：Styling in Primefaces (p:calendar / datepicker)Primefaces 中的样式（p:calendar / datepicker）
【发布时间】：2023-01-31 00:53:00
【问题描述】：

我正在开发一个现有的 JSF Primefaces 8 项目，以前的开发人员早已离开，在过去一年左右的时间里，我总体上变得相当有能力，但我仍然无法理解的一件事是样式。我相信该项目正在使用类似 sass 的东西。

我有几个 p:calendar 元素处于只读模式（没有自由格式的日期条目），它们构成了“从日期”和“到日期”的组合。我通过 minDate 和 maxDate 相互限制它们，以确保“截止日期”大于/等于“起始日期”。

到目前为止一切顺利，虽然它确实有效，但我想让它在视觉上更清楚地表明某些日期不可用。就像在“灰色”中一样，不可用的日期。不幸的是，它不会像那样呈现，不可用日期与有效日期具有相同的文本颜色和背景。

当我检查不可用的时，我得到了这个

<td class=" ui-datepicker-unselectable ui-state-disabled "><span class="ui-state-default">23</span></td>

所以我想我需要覆盖这个类的文本颜色，对吗？但是我该如何继续呢？

我在 src/resources/sass/_forms.scss 中找到了以下内容

    .ui-datepicker-calendar {
        font-size: 13px;
        margin: 8px 0 0 0;
        padding: 8px;

        td {
            padding: 2px;
            a {
                color: $text-color-primary;
                text-align: center;
                @include border-radius-all($border-radius);
            }

            &.ui-datepicker-today a {
                background-color: $panel-background-color-darkest;
            }

            a.ui-state-active {
                background-color: $highlight-primary-color;
                color: $text-color-white;
            }
        }
    }

我确实意识到我需要在不久的将来学习这里的原则，但任何快速帮助都会受到同样的赞赏。

谢谢你的时间

【问题讨论】：

这回答了你的问题了吗？ How do I override default PrimeFaces CSS with custom styles?
它可能很好，但我什至不知道知道与否。我想我需要在基础知识上自学，现在正是最好的时机。无论如何感谢您的回复和链接。我曾在搜索中看到这篇文章，但它给我留下了更多问题。没有头脑的猴子玩它并没有改变我的应用程序中的任何东西，甚至没有破坏它：D

标签： jsf sass primefaces

【解决方案1】：

我已经追根究底了。我需要调整我的一个 SASS (.scss) 文件中的日期选择器样式，并将以下部分添加到“.ui-datepicker-calendar {}”中：

    .ui-datepicker-unselectable .ui-state-default {
        color: $color-grey-lighten-3;
    }

【讨论】：