SPFx Package Deployment CSS differs from Workbench

I’m currently experiencing an issue that I’m struggling to get my head around. I have created a custom webpart and styled it using the Office UI Fabric in order to maintain consistency with the theme currently applied to the site.

On the dev tenant workbench,the CSS works as expected and maintains the theme across the webpart. This workbench is within the /sites/dev developer site I have created.

Correct CSS theme

After packaging and deploying the solution, adding it to the /sites/dev/ site as an app, and then adding the webpart to a page, it completely ignores all of my styling and changes the webpart to a blue background and white text.

Deployed CSS

I am not setting this styling anywhere in my code and I’m not sure where it’s being picked up from.

Similarly, if I deploy the webpart onto our production environment, it behaves differently again. On this environment, it keeps part of the theme, but doesn’t place the text in the green box, and also doesn’t make use of the full width of the page when it should be. The dev deployment does use the full width, but has the wrong coloration.

Deployed Prod CSS

Am I missing something that will cause SP to override my CSS styling? All of my styles are contained within the webpart class so as not to interfere with styling outside of my webpart.

As an aside, when deploying new versions of packaged solutions and hitting the “Get It” button in App Details, does the webpart automatically update on the page or does it need to be deleted and re-added?

Due to the styling issues I’m struggling to tell if the webpart is definitively the latest version.

Hopefully the above is enough information to be of assistance, but if you need me to provide any further information, I’m happy to oblige.

Thanks in advance for any help you may be able to offer!