Border CSS getting overridden by consumer

[arkogupta]

Environment Information

• Package version(s):
• Browser and OS versions: All

Please provide a reproduction of the bug in a codepen:

1. Go to a small list with ItemScope enabled : https://msft.spoppe.com/teams/SPGroups/Lists/AmySimpleList/AllItems.aspx
2. Try doing a drag drop to reorder columns, a border appears around the dragged column header.
3. Move to a large DocLib like https://msft.spoppe.com/teams/SPGroups/VNextDocLib/Forms/AllItems.aspx and try drag-n-drop. The border still appears.
4. Now refresh the page and again try drag-n-drop. The border is no longer present.
5. Go to the earlier small list again and try drag-n-drop. The border is no longer present.

The styles are organized in https://github.com/OfficeDev/office-ui-fabric-react/blob/2ce6c5ac3ccf4e62d4866841317b4aa55b8fb541/packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.styles.ts

Actual behavior:

The style applied to the class "borderWhileDragging" gets overridden by the css applied to the root class.

Expected behavior:

The style applied to the class "borderWhileDragging" gets applied.

Priorities and help requested:

Are you willing to submit a PR to fix? (Yes, No)

Requested priority: (Blocking, High, Normal, Low)
Normal

Products/sites affected: (if applicable)
SharePoint

[msft-github-bot]

🎉This issue was addressed in #7171, which has now been successfully released as [email protected].:tada:

Handy Links:

• Release Notes
• Official NPM Release
• Test the release with Developer Demo Site

[msft-github-bot]

🎉This issue was addressed in #7211, which has now been successfully released as [email protected].:tada:

Handy Links:

• Release Notes
• Official NPM Release
• Test the release with Developer Demo Site