CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
Batters
Batters

Reputation: 749

Material UI imported component makeStyles clashing

I have created a React component library using create-react-library. Within it I have some basic components that use Material UI components and also the material UI hook based styles pattern.

for example (hugely simplified of course):

// LibraryComponent.js

const useStyles = makeStyles((theme) => ({
    root: { background: 'blue' },
}));

export default function (props) {
    const classes = useStyles();
    return <div className={classes.root} />;
}

Now within a new app, I am importing this component from the library. Elsewhere in the app I have more components using the same styling pattern, and also using the class name 'root'. What I guess is now happening is that makeStyles in the library component is somehow not aware of similar calls in my app components and as a result is generating the same class string and thus overwriting or merging styles (a specific example from my app is the class makeStyles-root-9)

I have seen similar questions/answers on here talking about material UI and providers but I simply couldn't understand either their problems or the solutions so any help would be much appreciated.

Upvotes: 1

Views: 248

Answers (1)

Batters
Batters

Reputation: 749

I've managed to solve it without being 100% clear on the reason why but here is the fix:

yarn remove @material-ui/core @private/component-library
yarn add @material-ui/core @private/component-library

The issue was that there were two different versions of @material-ui/core in my app's package tree (one for the app itself, another within the dependencies of the component library). As a result, the makeStyles executions within the app and the component library weren't sharing the same class name generator and thus weren't prevented from clashing.

Hopefully this helps someone in future!

Upvotes: 1

Related Questions