How to use the @antv/dom-util.modifyCSS function in @antv/dom-util

const containerTpl = this.get('containerTpl');
    const outterNode = this.get('canvas').get('el').parentNode;
    let container;
    if (!this.get('htmlContent')) {
      if (/^\#/.test(containerTpl)) {
        // 如果传入 dom 节点的 id
        const id = containerTpl.replace('#', '');
        container = document.getElementById(id);
      } else {
        container = domUtil.createDom(containerTpl);
      }
    } else {
      container = this._getHtmlContent();
    }
    this.set('container', container);
    domUtil.modifyCSS(container, this.style[CONTAINER_CLASS]);
    outterNode.appendChild(container);
    outterNode.style.position = 'relative';
  }

const position = this.parsePoint(coord, this.get('position'));
    const parentNode: HTMLElement = container.get('canvas').get('el').parentNode;
    const wrapperNode: HTMLElement = domUtil.createDom('<div class="guide-annotation"></div>');
    parentNode.appendChild(wrapperNode);

    let html: any = this.get('html');
    if (_.isFunction(html)) {
      const xScales = this.get('xScales');
      const yScales = this.get('yScales');
      html = html(xScales, yScales);
    }
    // 判断 html 是 Html element 还是 html string
    const htmlNode: HTMLElement = _.isElement(html) ? html : domUtil.createDom(html);
    wrapperNode.appendChild(htmlNode);

    domUtil.modifyCSS(wrapperNode, {
      position: 'absolute', // to fix dom in the document stream to get the true width
    });

    this.setDomPosition(wrapperNode, htmlNode, position);
    this.set('el', wrapperNode);
  }

const itemDiv = Util.substitute(
      itemTpl,
      Util.mix(
        // @ts-ignore
        {
          // @ts-ignore
          index,
        },
        item
      )
    );
    const itemDOM = domUtil.createDom(itemDiv);
    domUtil.modifyCSS(itemDOM, this.style[LIST_ITEM_CLASS]);
    const markerDom = find(itemDOM, MARKER_CLASS);
    if (markerDom) {
      domUtil.modifyCSS(markerDom, this.style[MARKER_CLASS]);
    }
    const valueDom = find(itemDOM, VALUE_CLASS);
    if (valueDom) {
      domUtil.modifyCSS(valueDom, this.style[VALUE_CLASS]);
    }
    return itemDOM;
  }

if (reversed) {
      items.reverse();
    }

    let itemGroupContainer = _findNodeByClass(legendContainer, `${prefixClassName}-list`);
    if (!itemGroupContainer) {
      itemGroupContainer = domUtil.createDom(`<ul class="${prefixClassName}-list"></ul>`);
    }
    const listStyle = Util.deepMix({}, DEFAULT_THEME.listStyle, this.get('listStyle'));
    if (layout === 'horizontal') {
      // 使 itemGroupContainer 内容不换行，计算分页时才能比较 scrollWidth 和 offsetWidth 的大小。
      // @todo ie是否会有兼容问题？
      listStyle.width = 'max-content';
    }
    domUtil.modifyCSS(itemGroupContainer, listStyle);

    // 用于支持分页逻辑
    const clipContainer = domUtil.createDom('<div></div>');
    legendContainer.appendChild(clipContainer);
    clipContainer.appendChild(itemGroupContainer);

    this.set('_clipContainer', clipContainer);
    this.set('_itemGroupContainer', itemGroupContainer);

    let itemTpl = this.get('itemTpl');
    if (!itemTpl) {
      itemTpl = `<li class="${prefixClassName}-item">
      <span class="${prefixClassName}-item-marker"></span>
      <span class="${prefixClassName}-item-text"></span>
      </li>`;
    }

cursor: 'pointer',
        border: `${paginationCfg.activeColor} solid`,
        borderWidth: '2px 2px 0 0',
        width: `${paginationCfg.arrowSize}px`,
        height: `${paginationCfg.arrowSize}px`,
      };
      const inactiveStyle = {
        cursor: 'default',
        border: `${paginationCfg.inactiveColor} solid`,
        borderWidth: '2px 2px 0 0',
        width: `${paginationCfg.arrowSize}px`,
        height: `${paginationCfg.arrowSize}px`,
      };

      domUtil.modifyCSS(prePageButton, inactiveStyle);
      domUtil.modifyCSS(nextPageButton, activeStyle);
      if (paginationCfg.animation) {
        // 允许分页的滚动动画
        domUtil.modifyCSS(itemGroupContainer, {
          transition: 'transform .3s ease-in',
        });
      }

      let currentPage = 1;
      let translateX = 0;
      prePageButton.onclick = () => {
        if (currentPage === 1) {
          return;
        }
        currentPage -= 1;
        translateX += deltaWidth;
        currentPageNum.innerHTML = currentPage;

public updateCanvasStyle(styles: Record) {
    modifyCSS(this.getCanvasDOM(), styles);
  }

public moveTo(x: number, y: number) {
    const container = this.get('_legendContainer');
    domUtil.modifyCSS(container, {
      left: `${x}px`,
      top: `${y}px`,
    });
    this.set('x', x);
    this.set('y', y);
  }

public _renderTpl() {
    const showTitle = this.get('showTitle');
    const titleContent = this.get('titleContent');
    const container = this.get('container');
    const titleDom = find(container, TITLE_CLASS);
    const listDom = find(container, LIST_CLASS);
    const items = this.get('items');
    if (titleDom && showTitle) {
      domUtil.modifyCSS(titleDom, this.style[TITLE_CLASS]);
      titleDom.innerHTML = titleContent;
    }

    if (listDom) {
      domUtil.modifyCSS(listDom, this.style[LIST_CLASS]);
      Util.each(items, (item: ToolTipContentItem, index: number) => {
        listDom.appendChild(this._addItem(item, index));
      });
    }
  }

public renderTitle() {
    const title = this.get('title');
    if (title) {
      const prefixClassName = this.get('prefixClassName');
      const legendContainer = this.get('_legendContainer');
      let titleContainer = _findNodeByClass(legendContainer, `${prefixClassName}-title`);
      if (!titleContainer) {
        titleContainer = domUtil.createDom(`<div class="${prefixClassName}-title"></div>`);
        legendContainer.appendChild(titleContainer);
      }
      titleContainer.innerHTML = title;
      const titleStyle = Util.deepMix({}, DEFAULT_THEME.titleStyle, this.get('titleStyle'));
      domUtil.modifyCSS(titleContainer, titleStyle);
      this.set('_titleContainer', titleContainer);
    }
  }

prePageButton.onclick = () => {
        if (currentPage === 1) {
          return;
        }
        currentPage -= 1;
        translateY += deltaHeight;
        currentPageNum.innerHTML = currentPage;

        domUtil.modifyCSS(prePageButton, activeStyle);
        domUtil.modifyCSS(nextPageButton, activeStyle);
        domUtil.modifyCSS(itemGroupContainer, {
          transform: `translateY(${translateY}px)`,
        });
        if (currentPage === 1) {
          domUtil.modifyCSS(prePageButton, inactiveStyle);
        }
      };