How do I add row highlighting to a customization contained within a Base Acumatica BLC?

You can highlight the line of the grid with some conditions using Javascript. The first thing to do is to get the actual Javascript for it, it will look like below:

function HighligthLines ()
{
    if(px_all && px_all["ctl00_phG_tab_t0_grid"] && px_all["ctl00_phG_tab_t0_grid"].rows)
    {
        let lines = px_all["ctl00_phG_tab_t0_grid"].rows.items;
        for(let i=0;i<lines.length;i++)
        {
            let currentLine=lines[i];
            if(currentLine.getCell("OrderQty").getValue() > 10)
            {
                currentLine.style = 'background-color: red';
                currentLine.repaint();
            }
        }
    }
}

We will use px_all object of Acumatica Javascript API. The script above is checking if the OrderQty is greater than 10 for SO Line and if it is then is setting the background of the line to red.

Now after you have the script you need to add it to Acumatica's Sales Orders page. Add Javascript control above the Grid control like is shown below

And set the properties of the Script control in the following way:

IsStartupScript - True
Script          - the script shown above.

Set EnableClientScript to True for the grid control

Set Client Events -> AfterRefresh , AfterRowChange and Initialize to HighligthLines

Set EnableClientScript to True for the datasource and Client Events -> Initialize , CommandPerformed to HighligthLines

After these steps are done and customization is published you should see the lines of Sales Order with Order Quantity more than 10 with Red background like below:

The suggested approach will work with Acumatica ERP 2019 R1 for lower versions also it is required to add CSS styles to Acumatica ERP CSS.

UPDATE:

In 2019R1 and higher Acumatica has the following predifined CSS styles and basically you don't need to set the style to 'background-color: red' more correct will be to set the style to red or good or red20. If you want to use some other styles you will need to overwrite the 00_Controls.css file.

/*--------------- Styles for the grid cells ---------------*/
.GridRow {
  border-bottom: 1px solid #9FA8DA;
  border-bottom: 1px solid var(--activerow-color, #9FA8DA);
  border-right: 1px solid transparent;
  overflow: hidden;
  background-color: White;
  padding: 7px 8px 5px;
  line-height: 16px;
  min-height: 17px;
}

.GridRow .sprite-icon {
  margin-top: -4px;
}

.GridRow .sprite-icon.control-icon {
  overflow: visible;
}

.GridRow.bad {
  background-color: RGBA(255, 140, 155, 0.5) !important;
  color: #9c2d75 !important;
  border-bottom-color: RGBA(255, 140, 155, 0.5) !important;
}

.GridRow.good {
  background-color: RGBA(156, 237, 171, 0.5) !important;
  color: #007b74 !important;
  border-bottom-color: RGBA(156, 237, 171, 0.5) !important;
}

.GridRow.neutral {
  background-color: RGBA(255, 216, 79, 0.5) !important;
  color: #9c7258 !important;
  border-bottom-color: RGBA(255, 216, 79, 0.5) !important;
}

.GridRow.red {
  color: white !important;
  font-weight: bold;
  background-color: rgba(255, 0, 0, 0.9) !important;
  border-bottom-color: rgba(255, 0, 0, 0.9) !important;
}

.GridRow.red60 {
  background-color: rgba(255, 0, 0, 0.6) !important;
  border-bottom-color: rgba(255, 0, 0, 0.6) !important;
}

.GridRow.red40 {
  background-color: rgba(255, 0, 0, 0.4) !important;
  border-bottom-color: rgba(255, 0, 0, 0.4) !important;
}

.GridRow.red20 {
  background-color: rgba(255, 0, 0, 0.2) !important;
  border-bottom-color: rgba(255, 0, 0, 0.2) !important;
}

.GridRow.red0 {
  color: red !important;
  font-weight: bold;
}

.GridRow.orange {
  color: white;
  font-weight: bold;
  background-color: rgba(255, 140, 0, 0.9) !important;
  border-bottom-color: rgba(255, 140, 0, 0.9) !important;
}

.GridRow.orange60 {
  background-color: rgba(255, 140, 0, 0.6) !important;
  border-bottom-color: rgba(255, 140, 0, 0.6) !important;
}

.GridRow.orange40 {
  background-color: rgba(255, 140, 0, 0.4) !important;
  border-bottom-color: rgba(255, 140, 0, 0.4) !important;
}

.GridRow.orange20 {
  background-color: rgba(255, 140, 0, 0.2) !important;
  border-bottom-color: rgba(255, 140, 0, 0.2) !important;
}

.GridRow.orange0 {
  color: darkorange !important;
  font-weight: bold;
}

.GridRow.green {
  color: white !important;
  font-weight: bold;
  background-color: rgba(112, 173, 71, 0.9) !important;
  border-bottom-color: rgba(112, 173, 71, 0.9) !important;
}

.GridRow.green60 {
  background-color: rgba(112, 173, 71, 0.6) !important;
  border-bottom-color: rgba(112, 173, 71, 0.6) !important;
}

.GridRow.green40 {
  background-color: rgba(112, 173, 71, 0.4) !important;
  border-bottom-color: rgba(112, 173, 71, 0.4) !important;
}

.GridRow.green20 {
  background-color: rgba(112, 173, 71, 0.2) !important;
  border-bottom-color: rgba(112, 173, 71, 0.2) !important;
}

.GridRow.green0 {
  color: #70ad47 !important;
  font-weight: bold;
}

.GridRow.blue {
  color: white !important;
  font-weight: bold;
  background-color: rgba(91, 155, 213, 0.9) !important;
  border-bottom-color: rgba(91, 155, 213, 0.9) !important;
}

.GridRow.blue60 {
  background-color: rgba(91, 155, 213, 0.6) !important;
  border-bottom-color: rgba(91, 155, 213, 0.6) !important;
}

.GridRow.blue40 {
  background-color: rgba(91, 155, 213, 0.4) !important;
  border-bottom-color: rgba(91, 155, 213, 0.4) !important;
}

.GridRow.blue20 {
  background-color: rgba(91, 155, 213, 0.2) !important;
  border-bottom-color: rgba(91, 155, 213, 0.2) !important;
}

.GridRow.blue0 {
  color: #5b9bd5 !important;
  font-weight: bold;
}

.GridRow.yellow {
  color: black !important;
  font-weight: bold;
  background-color: rgba(255, 255, 0, 0.9) !important;
  border-bottom-color: rgba(255, 255, 0, 0.9) !important;
}

.GridRow.yellow60 {
  background-color: rgba(255, 255, 0, 0.6) !important;
  border-bottom-color: rgba(255, 255, 0, 0.6) !important;
}

.GridRow.yellow40 {
  background-color: rgba(255, 255, 0, 0.4) !important;
  border-bottom-color: rgba(255, 255, 0, 0.4) !important;
}

.GridRow.yellow20 {
  background-color: rgba(255, 255, 0, 0.2) !important;
  border-bottom-color: rgba(255, 255, 0, 0.2) !important;
}

.GridRow.yellow0 {
  color: yellow !important;
  font-weight: bold;
}

.GridRow.purple {
  color: white !important;
  font-weight: bold;
  background-color: rgba(128, 0, 128, 0.9) !important;
  border-bottom-color: rgba(128, 0, 128, 0.9) !important;
}

.GridRow.purple60 {
  background-color: rgba(128, 0, 128, 0.6) !important;
  border-bottom-color: rgba(128, 0, 128, 0.6) !important;
}

.GridRow.purple40 {
  background-color: rgba(128, 0, 128, 0.4) !important;
  border-bottom-color: rgba(128, 0, 128, 0.4) !important;
}

.GridRow.purple20 {
  background-color: rgba(128, 0, 128, 0.2) !important;
  border-bottom-color: rgba(128, 0, 128, 0.2) !important;
}

.GridRow.purple0 {
  color: purple !important;
  font-weight: bold;
}

For base Acumatica pages, another approach you may want to consider is to access the page in graph extension and subscribe to event handlers for styling.

Below is an example

using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using PX.Data;
using PX.Web.UI;

namespace MyExtModule
{
    public class MyGraphExt : PXGraphExtension<MyGraph>
    {
        public override void Initialize()
        {
            //Access page via http context current handler
            Page page = HttpContext.Current?.Handler as PXPage;
            if (page != null)
            {
                page.Load += Page_Load;
            }
        }

        private void Page_Load(object sender, EventArgs e)
        {
            Page page = (Page)sender;
            Style rowStyle1 = new Style();
            rowStyle1.BackColor = System.Drawing.Color.FromArgb(255, 0, 0);
            page.Header.StyleSheet.CreateStyleRule(rowStyle1, page, ".CssRowStyle1");

            Style rowStyle2 = new Style();
            rowStyle2.BackColor = System.Drawing.Color.LightYellow;
            page.Header.StyleSheet.CreateStyleRule(rowStyle2, page, ".CssRowStyle2");

            PX.Web.UI.PXGrid grdMyGridControl = (PX.Web.UI.PXGrid)ControlHelper.FindControl("MyGridControl", page);
            if (grdMyGridControl != null)
            {
                grdMyGridControl.RowDataBound += (object grdsender, PXGridRowEventArgs erdb) =>
                {
                    var data = erdb.Row.DataItem as YourDAC;
                    if (data == null) { return; }
                    if (data.YourDACField == [Your_Value_To_Compare])
                    {
                        erdb.Row.Style.CssClass = "CssRowStyle1";
                    }
                    else
                    {
                        erdb.Row.Style.CssClass = "CssRowStyle2";
                    }
                };
            }
        }
    }
}