Material-ui: dangerouslyUseGlobalCSS not working

[grigored]

I did a little debugging to figure out why dangerouslyUseGlobalCSS is not working, and it seems that styleSheet.options.classNamePrefix is undefined. My app was created with create-react-app, so this might be a problem with how webpack obfuscates class names? Is there any known workaround for this?

• [X] This is a v1.x issue.
• [X] I have searched the issues of this repository and believe that this is not a duplicate.

Steps to Reproduce

Link:
Here's a sample code showing the problem.

import * as React from 'react';

// @ts-ignore
import JssProvider from 'react-jss/lib/JssProvider';
import {
    createGenerateClassName, MuiThemeProvider, createMuiTheme, withStyles
} from '@material-ui/core/styles';

const generateClassName = createGenerateClassName({
    dangerouslyUseGlobalCSS: true,
    productionPrefix: 'c',
});

const styles = () => ({
    root: {
        backgroundColor: 'red',
    },
});

class ASDQ extends React.PureComponent<any, {}> {
    render() {
        const { classes } = this.props;
        return (
            <div className={classes.root}>abc2</div>
        );
    }
}

const B = withStyles(styles)(ASDQ);

export const App = () => (
    <JssProvider generateClassName={generateClassName}>
        <MuiThemeProvider theme={createMuiTheme()}>
            <B/>
        </MuiThemeProvider>
    </JssProvider>
);

Context

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | v1.2.0 |
| React | 16.4.1 |
| browser | chrome |
| etc. | |

[oliviertassinari]

@grigored Please provide a full reproduction test case. This would help a lot 👷 .
A repository would be perfect. Thank you!

[grigored]

@oliviertassinari Thanks for the quick reply. Here's a sample repo to demonstrate the problem: https://github.com/grigored/dangerouslyUseGlobalCS. In the readme you can find commands for running for dev/prod. Let me know if I can help with more info.

[oliviertassinari]

@grigored Thanks, the dangerouslyUseGlobalCSS option is primarily here for the Material-UI components. You have to provide a name to have it work with withStyles:
https://github.com/mui-org/material-ui/blob/ec304e6bedc1e429e33a2f5b85987f28ad17e761/packages/material-ui/src/Grid/Grid.js#L365

I guess we should document it.

[ArcanoxDragon]

Is there an additional step that has to be taken for custom components outside MUI? I'm writing a button wrapper and despite being inside my JssProvider and having the {name: "Whatever"} in my call to withStyles, my classes are still being suffixed by a number. All the default MUI classes are deterministic but my custom ones aren't.

[oliviertassinari]

@briman0094 I haven't anticipated this extra logic:
https://github.com/mui-org/material-ui/blob/e15e3a27d069a634ed6a8c7d9b208478e5ade64c/packages/material-ui/src/styles/createGenerateClassName.js#L62
Hum, It's probably a requirement we should remove.

[ArcanoxDragon]

Aha...yeah, didn't think to look in the createGenerate file. That would certainly explain it ;)

[grigored]

@oliviertassinari Yes, I also had this problem and I was commenting that line to make it work. I think it should be removed.

[oliviertassinari]

@grigored @briman0094 We can't just "remove" it, but we can definitely remove this requirement. I will work on that.

[ArcanoxDragon]

I worked around it by writing a wrapper for the generateClassName function that prefixes and then unprefixes the classNamePrefix with Mui during the call to the original function, but this is clearly not optimal and having an option to remove the Mui prefix requirement would be preferable.