Adding AutoComplete in Dialog breaks rendering outside and inside Dialog

[NixBiks]

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

This issue might be related to #18082 but I am not sure.

Working

If I have a Dialog component without AutoComplete components inside then my AutoComplete in the main content looks fine, see first two images.

Not working

If I add AutoComplete components to my Dialog component then all AutoComplete components starts looking weird.

Your Environment 🌎

Tech	Version
Material-UI	v4.6.1
React	v16.11.0
Browser	Version 78.0.3904.97
TypeScript	v3.6.4
Material UI lab	v4.0.0-alpha.32

Let me know if I need to provide additional information

[oliviertassinari]

@mr-bjerre Thanks for the report. I have seen this problem happen a couple of times already. It's a CSS injection order issue. You would need to import TextField before Autocomplete. However, I think that we should solve this problem in the core. We could increase the specificity on the conflicting rules:

diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
index bd6f52c52..cbf86bdc5 100644
--- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
+++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
@@ -30,9 +30,6 @@ export const styles = theme => ({
   inputRoot: {
     flexWrap: 'wrap',
     paddingRight: 62,
-    '& $input:not(:first-child)': {
-      paddingLeft: 4,
-    },
     '&[class*="MuiOutlinedInput-root"]': {
       padding: 8,
       paddingRight: 62,
@@ -57,14 +54,19 @@ export const styles = theme => ({
         right: 7,
       },
     },
+    '& $input:not(:first-child)': {
+      paddingLeft: 4,
+    },
+    '& $input': {
+      width: 0,
+      minWidth: 30,
+    },
   },
   /* Styles applied to the input element. */
   input: {
-    width: 0,
-    minWidth: 30,
     flexGrow: 1,
-    opacity: 0,
     textOverflow: 'ellipsis',
+    opacity: 0,
   },
   /* Styles applied to the input element if tag focused. */
   inputFocused: {

Would that work for you? Do you want to submit a pull request? :)

[NixBiks]

Cool thanks