question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

dangerouslyUseGlobalCSS not working

See original GitHub issue

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?

  • This is a v1.x issue.
  • 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.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:9 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
oliviertassinaricommented, Jul 31, 2018
1reaction
ArcanoxDragoncommented, Jul 31, 2018

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

dangerouslyUseGlobalCSS not working · Issue #12275 - GitHub
I did a little debugging to figure out why dangerouslyUseGlobalCSS is not working, and it seems that styleSheet.options.
Read more >
How do I expose material-ui-classes outside of my components?
The big problem is the syncing the styles between MUI and plain html. Is there a mechanism, for exposing material-ui css-classes, so that...
Read more >
CSS in JS - Material-UI
It's harder to keep track of classes API changes. ⚠️ When using dangerouslyUseGlobalCSS standalone (without Material-UI), you should name your style sheets.
Read more >
How to use the @material-ui/core/styles ... - Snyk
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues...
Read more >
A Better Way to Style Material-UI? - Bits and Pieces
Here are the problems I face when I tried to override it. Encapsulates reusable components with Bit to run them anywhere across your ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found