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

1 Answer 1


Try this to fix the missing css: gulp clean then gulp build --ship, gulp bundle --ship and gulp package-solution --ship. Ensure that you increased your build number before you do that

Also take a look at this to directly debug your Webpart on the SPO Site: Debug SharePoint Framework solutions on modern SharePoint pages

  • Thank you, will give this a go! Aug 26, 2020 at 21:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.