This is because rendering is an asynchronous process. This feature allows you to set an attribute multiple times, and set many different attributes, without multiple reflows. This is a performance enhancement in Aura, LWC, and many other frameworks.
You can get the correct results by waiting for a rendering cycle:
refreshArray : function(component, ...
You'd do this through the Aura Component Bundle Design Resource. Specifically, the label attribute:
Sets the label of the component when it displays in tools such as App
When creating a custom Lightning page template component, this text
displays as the name of the template in the Lightning App Builder new
If you add this .design file ...
I was able to figure this out by defining the style in the div on line 14.
Also on lines 19 and 27 I added the style to set the font color.
I then needed to remove these definitions from my CSS
<aura:component implements="forceCommunity:availableForAllPageTypes,force:appHostable" access="global" >
You can define all css combination in your css file then pass the class name dynamically from you server side.
<aura:component description="StackTest" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,