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

Question

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 deployed as .SSPKG - Layout lost

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