Using createGenerateClassName with AutoComplete causes style miss-match across dev-prod environments

AutoComplete styling uses CSS attribute selectors, per example: .MuiAutocomplete-inputRoot[class*="MuiOutlinedInput-root"] .MuiAutocomplete-endAdornment

If using createGenerateClassName with disableGlobal, this part [class*=“MuiOutlinedInput-root”] will NOT be converted, resulting that this rule will look something like: .jss-1[class*="MuiOutlinedInput-root"] .jss-2 and as you can imagine, these styles will not be applied if using this function, resulting that development and production build will have different styles and CSS rules.

Example generateClassName:

const generateClassName = createGenerateClassName({
  productionPrefix: "jss",
  disableGlobal: true
});

• 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 😯

The attribute selector parameter (*=MuiOutlinedInput-root) is not converted alongside the other class names, resulting in a miss-match between the rule and the element classes.

Expected Behavior 🤔

The value for the selector should also be converted to the respective class name that matches what is expected.

Steps to Reproduce 🕹

Development version: https://codesandbox.io/s/material-demo-9hfi2 Note: Inspect elements and check the style being applied to MuiAutocomplete-endAdornment

Production version: https://csb-9hfi2-5hq37dorc.now.sh/ Note: Inspect elements and check the style being applied to jss12 (equivalent to MuiAutocomplete-endAdornment).

You will note that the right padding is missing. If you edit the DOM content and add this class MuiAutocomplete-endAdornment to the element that has these classes jss66 jss51 jss9 jss76 jss67 jss71 jss56 (div which is the parent of jss12 | MuiAutocomplete-endAdornment) you will notice that the padding will appear as now the rule .jss7.jss8 .jss9[class*="MuiOutlinedInput-root"] is being applied to the end adornment.

Steps:

1. Define generateClassName configuration and enable disableGlobal
2. Use AutoComplete component
3. Deploy to “Production”
4. Check Development and Production environments, the styles are different between them.

Context 🔦

It’s impacting the production build of our app which is relying on Material UI, In the development environment it looks good but once we properly build it to release the styles get messed.

Also, it’s good to mention that this issue is happening on all other places that have this same approach, this element is just one example but inside AutoComplete there are a lot of other rules using this, not sure if any other component also follows this, if so, probably it’s happening there as well.

Your Environment 🌎

Tech	Version
Material-UI	v4.9.11
React	v16.3.1
Browser	Chrome 81.0.4044.113

[oliviertassinari]

@reenan Can’t tell, could be stable in 2021.

[oliviertassinari]

This was fixed in v5. We removed the notion of createGenerateClassName and used hard coded global class names instead