React elements in PCF render differently in Sandbox vs Model-Driven App

[cchannon]

I have noticed several small rendering differences between the PCF Sandbox and actual deployed PCFs in a model-driven app. Specifically, react elements appear to drop some style characteristics when they render in the model-driven apps that are otherwise respected in the Sandbox.

Attached is a screen shot with one simple example: a Fluent UI slider control with OriginFromZero.

When it renders in the Sandbox (attachment Shot1), notice two things: the label is centered over the slider, respecting the Stacking element from FluentUI and the "inactive" portion of the slider (everything outside the actively selected value) is a soft gray.

But, when the same control is packaged as a solution and deployed to a form (Shot2), the label left-aligned and the inactive portion of the slider disappears altogether. 

In the case of the text-align, this appears to be the result of an inheritance from a container div created by the Sandbox with class "control-pane". OK, so that one is understandable; there probably shouldn't be a parent div injecting its own inheritances unless it replicates CDS, but that's also pretty easy to circumvent just by overwriting it myself in styles, so we'll skip past that for now...

The really weird one here is the slider inactive portion because this is where the Sandbox is correctly presenting the FluentUI element (with class inactiveSection, background rgb(200, 198, 196) to give it that nice soft gray: see Shot3). But once it is deployed to the form. that same class has no background attribute at all (would be Shot4, but there is a 3-attachment limit in these posts), hence why it is invisible!

OK, so let's recap:

- Issue 1: the Sandbox has a container div that is passing its own inheritances to the pcf so it renders one way in Sandbox, but not necessarily the same once deployed. Easy enough to work around, but probably shouldn't be that way, in my opinion.

- Issue 2: Once deployed to a model-driven app, a specific "background" style element of a Fluent UI element is being dropped altogether, which I don't understand and don't see a clear path to working around.

Has anyone else observed these, and does anyone know a good workaround for #2?

[ScottDurow]

So you are seeing the React generated class are different depending on if it's running in Model vs Tester? Or are they the same - just the effective applied styles are different?

[cchannon]

Not totally sure how to answer that (I am pretty new to React). When I inspect using the React developer tools extension in Chrome/Edgium it doesn't show me the classes with enough specificity to see these style elements, so I can't say with absolute certainty that it is part of the class or just the applied style.

What I can tell you is that when I inspect the div in the Sandbox to see the effectively applied styles there is a background element with that gray color, but when I do the same after deploying, there is no such applied style.

[ScottDurow]

Using F12 on the test harness, find the background style and trace it to find the source - is it an inline style or a css class?

Inline styles will look like:

CSS classes generated by react will look like:

Also,  look out for styles that are inherited by cascading rules - they will look like:

Once you've located the source of the background style rule in the harness - inspect the same in the model driven app and you should be able to see where the source of the style is missing and track it down from there.

Hope this helps!

[cchannon]

Thanks for the clarification Scott,

Yes, it is the CSS class that contains the background element in Sandbox, but does not once deployed.

Sandbox:

Model-Driven:

[ScottDurow]

It’s interesting that the class names are different - are you sure you have the same code deployed as running in the tester?

[cchannon]

Absolutely certain. Rebuilt and redeployed to confirm; the class names are different but there is no question they refer to the same thing.

[ScottDurow]

What code are you using to set the style in your react code?

[cchannon]

Good Question. The answer is I am not. 

I am using the FluentUI Slider element, and letting it set all its own style rules:

import { Slider } from 'office-ui-fabric-react/lib/Slider';
...
...
<Slider 
	label="Adjust range in days:" 
	min={-180} 
	max={180} 
	step={30} 
	showValue 
	originFromZero 
	snapToStep
	value={Math.floor((this.state.inputDate.getTime() - this.state.baseDate.getTime())/oneDay)} 
	onChange={(event) => this.shiftDate(event)} />

[ScottDurow · Accepted solution]

Aha - so it's because the Model Driven Fluent UI themes is overriding the standard Fluent UI theme that you see in the Test harness

You will need to explicitly set the style:

<Slider ... styles={{ inactiveSection: { background: DefaultPalette.neutralTertiaryAlt } }}

 (you will need to import DefaultPalette)

alternatively you could hard code the colour:

<Slider ... styles={{ inactiveSection: { background: "#C8C6C4" } }}

Hope this helps