Issue title: Office UI Fabric Layout Grid stop working in SPFx
 Issue body: ## Category

- [x] Bug

## Describe the bug

I'm working on a SPFx project, i was using the Grid system from [Layout in Office UI Fabric](https://developer.microsoft.com/en-us/fluentui?fabricVer=6#/styles/web/layout) i know it was working as of april 28, but now it's not rendering correctly. Here's a example of the code
<pre><code>&lt;div className=&quot;ms-Grid&quot; dir=&quot;ltr&quot;&gt;
  &lt;div className=&quot;ms-Grid-row&quot;&gt;
    &lt;div className=&quot;ms-Grid-col ms-sm1&quot;&gt;A&lt;/div&gt;
    &lt;div className=&quot;ms-Grid-col ms-sm1&quot;&gt;B&lt;/div&gt;
    &lt;div className=&quot;ms-Grid-col ms-sm1&quot;&gt;C&lt;/div&gt;
    &lt;div className=&quot;ms-Grid-col ms-sm1&quot;&gt;D&lt;/div&gt;
    &lt;div className=&quot;ms-Grid-col ms-sm1&quot;&gt;E&lt;/div&gt;
    &lt;div className=&quot;ms-Grid-col ms-sm1&quot;&gt;F&lt;/div&gt;
    &lt;div className=&quot;ms-Grid-col ms-sm1&quot;&gt;G&lt;/div&gt;
    &lt;div className=&quot;ms-Grid-col ms-sm1&quot;&gt;H&lt;/div&gt;
    &lt;div className=&quot;ms-Grid-col ms-sm1&quot;&gt;I&lt;/div&gt;
    &lt;div className=&quot;ms-Grid-col ms-sm1&quot;&gt;J&lt;/div&gt;
    &lt;div className=&quot;ms-Grid-col ms-sm1&quot;&gt;K&lt;/div&gt;
    &lt;div className=&quot;ms-Grid-col ms-sm1&quot;&gt;L&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</pre></code>

## Steps to reproduce

Create a simple SPFx project, use React as FrameWork add this code to your WebPart
<pre><code>&lt;div className=&quot;ms-Grid&quot; dir=&quot;ltr&quot;&gt;
  &lt;div className=&quot;ms-Grid-row&quot;&gt;
    &lt;div className=&quot;ms-Grid-col ms-sm1&quot;&gt;A&lt;/div&gt;
    &lt;div className=&quot;ms-Grid-col ms-sm1&quot;&gt;B&lt;/div&gt;
    &lt;div className=&quot;ms-Grid-col ms-sm1&quot;&gt;C&lt;/div&gt;
    &lt;div className=&quot;ms-Grid-col ms-sm1&quot;&gt;D&lt;/div&gt;
    &lt;div className=&quot;ms-Grid-col ms-sm1&quot;&gt;E&lt;/div&gt;
    &lt;div className=&quot;ms-Grid-col ms-sm1&quot;&gt;F&lt;/div&gt;
    &lt;div className=&quot;ms-Grid-col ms-sm1&quot;&gt;G&lt;/div&gt;
    &lt;div className=&quot;ms-Grid-col ms-sm1&quot;&gt;H&lt;/div&gt;
    &lt;div className=&quot;ms-Grid-col ms-sm1&quot;&gt;I&lt;/div&gt;
    &lt;div className=&quot;ms-Grid-col ms-sm1&quot;&gt;J&lt;/div&gt;
    &lt;div className=&quot;ms-Grid-col ms-sm1&quot;&gt;K&lt;/div&gt;
    &lt;div className=&quot;ms-Grid-col ms-sm1&quot;&gt;L&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</pre></code>

## Expected behavior

Should give you a Grid of 12 columns
![image](https://user-images.githubusercontent.com/21227974/82348311-af30b280-99c6-11ea-868d-80a2edc5aba9.png)


## Environment details (*development & target environment*)
- **OS**:
- **Target Environment**: SharePoint Online
- **Framework**: SPFx v1.10.0 - React - Office-ui-fabric-react 
- **Browser(s)**: 
- **Tooling**: VS Code | SPFx v1.10.0 | Office-ui-fabric-react v6.189.2
- **Additional details**: Package.json
"dependencies": {
    "react": "16.8.5",
    "react-dom": "16.8.5",
    "@types/react": "16.8.8",
    "@types/react-dom": "16.8.3",
    "office-ui-fabric-react": "6.189.2",
    "@microsoft/sp-core-library": "1.10.0",
    "@microsoft/sp-property-pane": "1.10.0",
    "@microsoft/sp-webpart-base": "1.10.0",
    "@microsoft/sp-lodash-subset": "1.10.0",
    "@microsoft/sp-office-ui-fabric-core": "1.10.0",
    "@types/webpack-env": "1.13.1",
    "@types/es6-promise": "0.0.33"
  },
  "resolutions": {
    "@types/react": "16.8.8"
  },
  "devDependencies": {
    "@microsoft/sp-build-web": "1.10.0",
    "@microsoft/sp-tslint-rules": "1.10.0",
    "@microsoft/sp-module-interfaces": "1.10.0",
    "@microsoft/sp-webpart-workbench": "1.10.0",
    "@microsoft/rush-stack-compiler-3.3": "0.3.5",
    "gulp": "~3.9.1",
    "@types/chai": "3.4.34",
    "@types/mocha": "2.2.38",
    "ajv": "~5.2.2"
  }

### Additional context
Like i said, it was working as 28 April and i notice on May 14 it stopped working and it render like that:
![image](https://user-images.githubusercontent.com/21227974/82350340-397a1600-99c9-11ea-86b2-6d89d61fdd08.png)

You can also refer to those tickets:
[#5745](https://github.com/SharePoint/sp-dev-docs/issues/5745)
[#13112](https://github.com/microsoft/fluentui/issues/13112)

I know that their is some work around like including in your scss file those lines
:global{
  @import 'node_modules/office-ui-fabric-react/dist/css/fabric.css';
}
as mention by Stefan Bauer - [SharePoint Framework and the Office UI Fabric grid system](https://n8d.at/sharepoint-framework-and-the-office-ui-fabric-grid-system/)
but i was working before without this in your .scss file

*Thanks for your contribution! Sharing is caring.*

 Comments: 
 Comment 0: Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.
 Comment 1: This happened back in November as well .. and was related to those ms classes for grid being directly used in the markup 

you may want to try and apply the ms-SPLegacyFabricBlock class to the elements surrounding your grid 


My Button elements are also now showing a Black Border around them 


![2020_05_19_11_25_52_](https://user-images.githubusercontent.com/15833201/82352544-c28e4e80-99c3-11ea-9c33-700c37a93bb4.jpg)

 Comment 2: @rmbw74, Thanks for your reply, sorry but it didn't resolve the problem.
![image](https://user-images.githubusercontent.com/21227974/82495330-ee3f3080-9ab8-11ea-9af3-8c17b421216c.png)

 
 Comment 3: Hi everyone,
I have the same problem.
If I set "loadLegacyFabricCss": true in the manifest, everything works BUT only in debug
 Comment 4: Having `.ms-SPLegacyFabricBlock` by itself is not sufficient. That selector requires the Fabric stylesheet be loaded on the host page. The loading of that stylesheet on the host page is based on the following SPFx documentation:

- https://github.com/SharePoint/sp-dev-docs/wiki/SharePoint-Framework-v1.8-release-notes#deprecating-legacy-fabric-css-consumption
- https://github.com/SharePoint/sp-dev-docs/wiki/Safely-using-legacy-Fabric-Styles

Specifying `loadLegacyFabricCss: true` in a solution's manifest should cause the host page to request the legacy stylesheet named `chunk.legacy-third-party-fabric-core.css`.

@mrcpgn you mention that you've specified the manifest flag, but do not see the fix on the hosted page. Can you confirm the above mentioned stylesheet is not loaded in the "Network" pane?
 Comment 5: > This happened back in November as well .. and was related to those ms classes for grid being directly used in the markup
> 
> you may want to try and apply the ms-SPLegacyFabricBlock class to the elements surrounding your grid
> 
> My Button elements are also now showing a Black Border around them
> 
> ![2020_05_19_11_25_52_](https://user-images.githubusercontent.com/15833201/82352544-c28e4e80-99c3-11ea-9c33-700c37a93bb4.jpg)

@rmbw74 I'll follow-up with the issue you're facing in https://github.com/SharePoint/sp-dev-docs/issues/5764.
 Comment 6: > legacy-third-party-fabric-core.css

Hi Kevin,
I have specified the flag but I don't see the fix and the css is not loaded.
In debugging (gulp serve) it works and I see that, unlike the hosted page, this js is loaded:

![image](https://user-images.githubusercontent.com/5881351/82950991-ae8bb380-9fa6-11ea-887c-cc68a86f9249.png)


 Comment 7: Hi Everyone,
@KevinTCoughlin, yes, if i specified the `"loadLegacyFabricCss": true,` in my manifest it works fine, in prod or in dev.(workbench) but since this seem to be deprecated(https://github.com/SharePoint/sp-dev-docs/wiki/SharePoint-Framework-v1.8-release-notes#deprecating-legacy-fabric-css-consumption). 
So i don't recommend using this.

To solve this problem, i added a simple import in my script file(.tsx) like this: 
**import 'office-ui-fabric-react/dist/css/fabric.css';** 
and everything works fine now and, it even add the "ms-SPLegacyFabricBlock" in my rendering.

I will probably close this issue, cause it's working now.
But i would recommend to change the documentation, to tell people that they need to include the `office-ui-fabric-react/dist/css/fabric.css` in their solution.

Thanks
 Comment 8: @JackStrap thanks for confirming. I've updated the above referenced release notes documentation to include your point.

Note that the selector `ms-SPLegacyFabricBlock` is appended because your manifest specifies `loadLegacyFabricCss": true`. The host app reads that and sets the selector on the web part root DOM Node.
 Comment 9: @mrcpgn your issue seems similar to https://github.com/SharePoint/sp-dev-docs/issues/5764. Can you provide information about your SPFx version in that issue? I am working on repros. Thanks.
 Comment 10: > @mrcpgn your issue seems similar to #5764. Can you provide information about your SPFx version in that issue? I am working on repros. Thanks.

@KevinTCoughlin SPFx v1.10.0
I solved it by moving the style from the markup to the scss file


 Comment 11: I have the same issue. I am working with 1.10.

I have not tried any of the solutions, but will try soon.

It just seems odd this kind of regression of the sudden. I know it was working as I deployed a few weeks ago to an Acceptance site collection and it was fine. When I was showing to some of the stakeholders, recently, some parts were broken without any further deploy.
 Comment 12: Ok, more details on this issue.

After making more test, I realize that importing the `fabric.css` in your `.tsx file` doesn’t always work. 
It works fine, if you run your webpart locally, meaning, you did your bundle and package without the `–ship` argument. 
But, when you bundle and do your packaging with the `–ship` or `–production` switch, it stops working. Bizarre, like the `fabric.css` is not included in the package for production. 

So, to solve this, I’ve included the `fabic.css` in the scss file of the project just below the import of the `References.scss` file. 
`@import '~office-ui-fabric-react/dist/css/fabric.css';`

After that everything works fine in dev. or in production.

Thanks, everyone!

 Comment 13: Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: [Issue List: Our approach to locked issues](https://github.com/SharePoint/sp-dev-docs/wiki/Issue-List#our-approach-to-locked-issues)
{'source': 'GithubIssues', 'repo_name_with_owner': 'SharePoint/sp-dev-docs', 'issue_id': 621113861, 'repo_stars': 1238.0}