覆盖 JQXWidget css 样式不起作用

Posted 2023-05-08

【中文标题】覆盖 JQXWidget css 样式不起作用

【英文标题】：Overriding JQXWidget css style not working

【发布时间】：2020-10-31 18:13:48

【问题描述】：

我正在使用来自 JQXWidget 的 html5 形式的 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;

组件代码 sn-p（这是在表单控件内部）：

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

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

另外，我尝试在 css 中使用和不使用 [覆盖]，但没有成功。

此处更新 jqz 日期时间样式可能不正确或缺少什么？

谢谢，

RDV

【参考方案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 类。

谢谢，

RDV