如何覆蓋 ng-bootstrap datepicker element.style

Question

我正在使用 ng-bootstrap datepicker 並遇到底部邊框被切割的問題，這可能是因為應用了嵌套的 div 類，但我不想調查每個嵌套的 div 類來弄清楚，而是我想要覆蓋我通過 chrome 開發工具發現的 ng-datepicker 屬性（轉換）導致了問題。 請查看問題的附件圖片。因此，在 chrome 中，當我單擊日歷圖標時，日期選擇器顯示底部邊框被切碎，下面是應用的 css/屬性

    <ngb-datepicker class="dropdown-menu show" style="padding: 0px; position: absolute; top: 0px; left: 0px; transform: translate(0px, 28px);">

element.style {
    padding: 0px;
    position: absolute;
    top: 0px;
    left: 0px;
    transform: translate(0px, 28px);
}

在 chrome 中，當我將轉換屬性更改為

    transform: translate(0px, -42px)

解決了這個問題。 我不想對樣式進行硬編碼，想要在 style.css 中定義類 angular 6 以便它應用於所有 ng-datepicker。如何覆蓋此轉換屬性？

Answer 1

您可以為 ngb-datepicker 和特定樣式設置類或 id。

  <ngb-datepicker class="dropdown-menu show mydatepicker">

在樣式.css

.mydatepicker{
    padding: 0px;
    position: absolute;
    top: 0px;
    left: 0px;
    transform: translate(0px, -42px);
}

Answer 2

我終於能夠使用 style:css 中的 important 覆蓋 ngbdatepicker，如下所示：

    ngb-datepicker{
  left: 0px !important;
  top: 0px !important;
  padding-top: 0px !important;
  padding-right: 0px !important;
  padding-bottom: 0px !important;
  padding-left: 0px !important;
  position: absolute !important;
  transform: translate(0px, 28px)!important;
}

Answer 3

這是我的 HTML 片段

> <div class="q-datepicker position-relative w-100">
                    <input
                        formControlName="From"
                        class=" form-control rounded-corner bg-white primary-font-color"
                        placement="bottom"
                        placeholder=""
                        [minDate]=""
                        ngbDatepicker
                        #d="ngbDatepicker"
                        readonly=""
                    />
                    <button
                        type="button"
                        (click)="d.toggle()"
                    >
                        <i class="far fa-calendar-alt"></i>
                    </button>
                </div>

我添加到 div 標簽“q-datepicker”類，然后在 style.css 中添加以下樣式

.q-datepicker{
ngb-datepicker{
  left:0 !important;
  width: 350px;
  .ngb-dp-months{
    .ngb-dp-month{
      width: 100%;
      .ngb-dp-weekday{
        width: 2.5rem;
        margin-right: .5rem;
      }
      .ngb-dp-week{
        .ngb-dp-day{
            width: 2.5rem;
            margin-right: .5rem;
            div{
                width: 100%;
            }
        }
      }
    }
  }
}

}