angular - 隐藏 p-calendar primeng 中的清除按钮

Question

大家好，我正在使用 PrimeNg 和 p-calendar 模块。我的日历显示两个名为“今天”和“清除”的按钮。我的问题是我只想显示一个按钮，而不是同时显示两个按钮。我不想显示的按钮是清除按钮，而另一个按钮则保持可见。

有任何方法可以隐藏按钮，因为 primeng 不提供仅隐藏一个按钮的可能性。

p-calendar 内生成的 html 很大，可以将所有 html 代码放在这里。但这是按钮的html代码。

<div class="ui-datepicker-buttonbar ui-widget-header ng-tns-c10-7 ng-star-inserted" style="">
    <div class="ui-g">
        <div class="ui-g-6">
            <button class="ng-tns-c10-7 ui-button-secondary ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" pbutton="" type="button" ng-reflect-ng-class="ui-button-secondary" ng-reflect-label="Today"><span class="ui-button-text ui-clickable">Today</span></button>
        </div>
        <div class="ui-g-6">
            <button class="ng-tns-c10-7 ui-button-secondary ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" pbutton="" type="button" ng-reflect-ng-class="ui-button-secondary" ng-reflect-label="Clear"><span class="ui-button-text ui-clickable">Clear</span></button>
        </div>
    </div>
</div>

CSS 代码:

.ui-datepicker-buttonbar > div.ui-g div:last-child {
    display: none;
}

非常感谢。

Answer 1

您必须在 CSS 之前添加::ng-deep As，您想更改库组件的样式

::ng-deep.ui-datepicker-buttonbar > div.ui-g div:last-child {
    display: none;
}

或者您可以将其放入主 style.css/style.scss 文件中