How to use the @instructure/ui-utils.px function in @instructure/ui-utils

shouldOverlayTray (minWidth, trayWidth, contentWidth, trayIsOverlayed) {
    if (!this._content) return false

    const minWidthPx = px(minWidth, this._content)

    if (trayIsOverlayed) {
      return (contentWidth - trayWidth) < minWidthPx
    } else {
      return contentWidth < minWidthPx
    }
  }

shouldOverlayTray (minWidth, trayWidth, contentWidth, trayIsOverlayed) {
    if (!this._content) return false

    const minWidthPx = px(minWidth, this._content)

    if (trayIsOverlayed) {
      return (contentWidth - trayWidth) < minWidthPx
    } else {
      return contentWidth < minWidthPx
    }
  }

Object.keys(query).forEach((selectorName) => {
    const { minWidth, maxWidth, minHeight, maxHeight } = query[selectorName]
    rules.push([
      selectorName,
      {
        minWidth: px(minWidth, el) || 0,
        maxWidth: px(maxWidth, el) || Infinity,
        minHeight: px(minHeight, el) || 0,
        maxHeight: px(maxHeight, el) || Infinity
      }
    ])
  })