Material-UI class name collisions

Question

I'm building a MUI-based component library for use on multiple internal sites, using Lerna to manage the package for local development. We're having some issues with the class names colliding. For example:

MyComponent.jsx

const useStyles = makeStyles(theme => ({
    root: { 
    ...
    }
})

export const MyComponent = props => {
    const classes = useStyles();

    return (
        <div className={classes.root}>
            Hello SO
        </div>
    );
}

import { MyComponent } from 'my-library';

const useStyles = makeStyles(theme => ({
    root: { 
    ...
    }
})

export const MyView = props => {
    const classes = useStyles();

    return (
        <div className={classes.root}> // classes.root === "makeStyles-root-1"
            <MyComponent /> // root class is named "makeStyles-root-1
        </div>
    );

}

This is causing problems due to some classes being overridden by the name collisions.

Answer 1

Moving MUI to be ONLY a peer dependency (instead of devDep and peer) resolved the problem.