覆盖 JQXWidget css 样式不起作用

Question

我正在使用 html5 形式的 JQXWidget 中的 jqxDateTimeInput 控件。使用 Angular 7 和 JQuery 版本 3.1。我想改变jqx输入内容的字体，只针对这个组件。我没有使用任何 jqx 主题。在我的组件 css 中，我尝试添加以下内容，但它不起作用：

@import "jqwidgets-awf/jqwidgets/styles/jqx.base.css";

[override] .jqx-widget-content{
  font-size: medium;
  font-style: oblique;
  background-color: red($color: #000000);
}

[override] .jqx-input-content{
  font-size: 20px;
}

组件代码片段（在 form-control 内）：

  <jqxDateTimeInput [id]="item.id" [name]="item.id" [(ngModel)]="item.jqxDate">
  </jqxDateTimeInput>

我检查了呈现的元素，当我在 class“.jqx-input-content”上更新字体大小时，字体大小确实发生了变化，但是当我将它添加到 css 时，它不起作用。

此外，我在 css 中尝试使用和不使用 [override]，但都没有成功。

这里更新 jqz 日期时间样式可能有什么不正确或遗漏的地方？

谢谢，

RDV

Answer 1

已找到此问题的解决方案 - 必须在全局 styles.scss 中添加样式。

以下对我有用：

.jqx-input-bootstrap {
  height: 40px !important;
}
.jqx-input-content-bootstrap {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  padding: 0.375rem 0.75rem;
}

唯一的问题是它必须在全球范围内完成，这会影响任何 jqx-input-content-bootstrap class.

谢谢，

RDV

覆盖 JQXWidget css 样式不起作用

Overriding JQXWidget css style not working

css

jqxwidgets

angular2-forms