Dev-extreme pivot grid headers styling is not working properly when applying it from code

Question

I am working on dxpivotgrid(component of dev-extreme) of dev-extreme. Initially I was applying style in onContentReady() event. when I was applying bigger font size on the header of pivot grid it was make the font size bigger but it do not increase the size field panels.

Picture of Field Panel after applying styling on panel:

I have used the following code in onContentReady()

const elements: any = document.querySelectorAll('.dx-pivotgrid-fields-area-head .dx-area-field ');
  if (elements !== null && elements.length > 0) {
    elements.forEach((element: any) => {
      element.style.backgroundColor = this._CrossFormating.fieldsBackColor;
      element.style.color = this._CrossFormating.fieldsForeColor;
      element.style.fontWeight = this._CrossFormating.fieldFont.isBold ? 'bold' : '';
      element.style.fontStyle = this._CrossFormating.fieldFont.isItalic ? 'italic' : '';
      element.style.textDecoration = this._CrossFormating.fieldFont.isUnderline ? 'underline' : '';
      element.style.fontFamily = this._CrossFormating.fieldFont.fontFamily;
      element.style.fontSize = this._CrossFormating.fieldFont.size.toString() + 'px';
    });
  }

But when I use the same code in onCellPrepared() event it behave a bit different. While debugging the code I have fond that it is working properly but when the event ends then it applies the default style on field panel which is provided by dev-extreme. Picture of that issue is shown below

After ending of event onCellPrepared():