时间戳

首页 > 解决方案 > 如何覆盖 ng2-date-picker 的输入 CSS 样式

css - 如何覆盖 ng2-date-picker 的输入 CSS 样式

问题描述

我正在尝试设置Angular2 ng2-date-picker ( link ) 组件的样式，并希望得到任何指导。

我在网上找不到任何有关此组件样式的文档，并且在stackoverflow上只有一个类似的问题，这对我没有多大帮助。

I would like to style the actual `<input >` element inline with the below CSS:

.af-input {
    font-size: 20px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: normal;
    border-radius: 15px;
    border: solid 1px $af-brownish-grey;
    background-color: transparent;
    color: $af-brownish-grey;
  }

这是我在 HTML/View 中的设置：

<div class="date-picker">
    <dp-date-picker theme="dp-material" [(ngModel)]="selectedDate" mode='daytime' [config]='config'></dp-date-picker>
</div>

这些是我在浏览器中检查元素时看到的 CSS 属性：

dp-date-picker.dp-material .dp-picker-input {
    box-sizing: border-box;
    height: 30px;
    width: 213px;
    font-size: 13px;
    outline: 0;
}

button, input {
    overflow: visible;
}
button, input, optgroup, select, textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

这是检查 ng-date-picker 元素时的 HTML 代码：

<div _ngcontent-oyd-c55="" class="date-picker">
    <dp-date-picker _ngcontent-oyd-c55="" theme="dp-material" mode="daytime" ng-reflect-theme="dp-material"
        ng-reflect-mode="daytime" ng-reflect-config="[object Object]" class="dp-material ng-valid ng-dirty ng-touched"
        ng-reflect-model="Fri Jun 19 2020 13:50:18 GMT+0">
        <div ng-reflect-ng-class="[object Object]" class="dp-open">
            <div class="dp-input-container"><input type="text" class="dp-picker-input ng-pristine ng-valid ng-touched"
                    ng-reflect-is-disabled="false" ng-reflect-model="2020-06-19" placeholder=""></div>
        </div>
    </dp-date-picker>
</div>

先感谢您！

标签： cssangular

解决方案

这个组件似乎不允许配置样式。您需要使用 css 手动覆盖现有样式。只需检查元素并找到您想要覆盖的所需选择器。由于这是一个外部组件，请确保使用 包装您的样式::ng-deep { ... }，以便您的样式放置在 DOM 树的顶部并且可以覆盖初始样式。

推荐阅读