Overriding JQXWidget css style not working

Question

I am using jqxDateTimeInput control from JQXWidget in html5 form. Using Angular 7 with JQuery version 3.1. I want to change the font of jqx input content, only for this component. I am not using any jqx theme. In my component css i tried adding the following, but it is not working:

@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;
}

Component code snippet (this is inside form-control):

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

I inspected the rendered element, and when I updated font-size on class ".jqx-input-content", font size did change, but when I add it to css, it is not working.

Also, I tried with and without [override] in css, but no success.

What could be incorrect or missing here to update jqz date time style?

Thanks,

RDV

Answer 1

Found solution to this problem - had to add style in global styles.scss.

Below worked for me:

.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;
}

The only catch is that it has to be done at global level which impacts any jqx-input-content-bootstrap class.

Thanks,

RDV