Sp-dev-fx-webparts: OOB and custom webparts have white border, after apply section background color

[harshdamaniahd]

ControlZoneEmphasisBackground root-87 adds white border to some OOB and all Custom SPFX webparts. Thus making the page look ugly. See the other image , when you remove the css you see that it takes row section color

[Mouritze]

I would like to second this. All our custom developed SPFX webparts gets a wrapper div with a class called ControlZoneEmphasisBackground. This class sets an 8px padding and white background, making it look like we have a large white border around all webparts. We only noticed after we started using the new Section Backgrounds.

[harshdamaniahd]

Let's wait for a fix

[a-kitaev]

Had to apply custom css to fix it. It is ugly indeed. Hope it gets fixed soon.

[OliverZeiser]

There is a new property for webarts manfiest.json called "supportsThemeVariants" that you can add to your webpart so it does not get this white background. But it is not yet supported in the schema although it works. OOTB Webparts are making use of this already.
It is once again a big fail from MS side. No guidance on the new theming. Especially since they are already rolling out the section color feature to all tenants and not just targeted release.

[menialfob]

There is a new property for webarts manfiest.json called "supportsThemeVariants" that you can add to your webpart so it does not get this white background. But it is not yet supported in the schema although it works. OOTB Webparts are making use of this already.
It is once again a big fail from MS side. No guidance on the new theming. Especially since they are already rolling out the section color feature to all tenants and not just targeted release.

Thanks a lot for letting us know about this. Is it possible to guide us to where you got this information? I searched for that string in all the SPFX related GitHub repositories, I could not find anyone adding that property to their manifest yet.

[OliverZeiser]

Like I mentioned before, there is no guidance ;) I simply looked at /_api/web/GetClientSideWebParts which gives you back all webpart manifests. Including the OOTB ones. That is where I noticed this property and simply tested it. But there should be more to the new theming story than just this property... I did send a tweet to @VesaJuvonen so I am hoping to get some more guidance soon...

[harshdamaniahd]

True ..common MS need to do more documenation. Make our life easier :-)

[harshdamaniahd]

I tired adding supportsThemeVariants but doesnt work. I tried deploying and seeing but does not work

[menialfob]

It works fine for me, thank you @OliverZeiser!
@harshdamaniahd I added it like this in the manifest which worked for me:

[clechner77]

@menialfob - I'm guessing you have the most recent spfx version on that web part? A couple of my older web parts would not build with that line in the manifest.

[Mouritze]

@clechner77 I can confirm that this builds in spfx version 1.7.0 and that it will not build in 1.4.1.

[bcameron1231]

Hi! Just checking in on this old issue, sounds like you have come to a resolution to your issue. Could you confirm whether this can be closed?

[harshdamaniahd]

Yes these issues are closed. Everything is working