SharePoint Online Workbench layout much different from deployed .sppkg webpart – Using React


I’m using SPFx/React to create a simple custom form.

Using Fluent UI grid, controls, etc. and it looks fine in the dev workbench area, but as soon as it’s deployed the layout is completely ignored.

I can see that my grid/columns are there in the console and can’t find much information on why the layout is so different once it’s deployed. Seems like my CSS is also not there, but shouldn’t it be bundled in the package?

I’m still very new to all this so the fix may be simple but it’s definitely got me stumped right now. I can’t find much information online about the issue. It seems to just be losing my grid and the width is way wider than the SP workbench.

Is there any way to have the SP Workbench have the same layout as the actual environment?

Any help or a bump in the right direction would be greatly appreciated.

Thank y’all, stay safe!

Layout in SharePoint Workbench
layout in SP Workbench

Layout deployed as .SSPKG – Layout lost
layout deployed in actualy SP Environment