[OutlinedInput] normalize.css breaks the notch

[ardov]

Normalize.css adds display rule to legend that breaks the notch in OutlinedInput

legend {
  display: table;
}

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

With normalize.css enabled, the notch is always visible.

Expected Behavior 🤔

notch is hidden

Steps to Reproduce 🕹

https://codesandbox.io/s/legend-display-bug-g70zr

Context 🔦

Your Environment 🌎

Tech	Version
Material-UI	v4.9.0
React	v16.12

[oliviertassinari]

@Alexeyun1k Thank you for the report. I believe we should be able to handle this problem in the core. Enabling developers to cherry-pick our components in a codebase without any side effects has been a core design value since the beginning.

What do you think of this diff?

diff --git a/packages/material-ui/src/OutlinedInput/NotchedOutline.js b/packages/material-ui/src/OutlinedInput/NotchedOutline.js
index 374f86068..4e85fb12f 100644
--- a/packages/material-ui/src/OutlinedInput/NotchedOutline.js
+++ b/packages/material-ui/src/OutlinedInput/NotchedOutline.js
@@ -34,6 +34,7 @@ export const styles = theme => {
     },
     /* Styles applied to the legend element. */
     legendLabelled: {
+      display: 'block',
       textAlign: 'left',
       padding: 0,
       height: 11, // sync with `lineHeight` in `legend` styles

[ardov]

Cool, that should fix it 👍

[oliviertassinari]

@Alexeyun1k Great, feel free to submit a pull request :). We haven't anticipated popular global CSS resets.

[ardov]

Ok, I'll do it :)