score:1
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!
Source: stackoverflow.com
Related Query
- Material UI imported component makeStyles clashing
- React JS / Material UI - Call method from imported Component
- Material UI makeStyles inside a TSX Class Component
- How to style components using makeStyles and still have lifecycle methods in Material UI?
- How to use useStyle to style Class Component in Material Ui
- React testing library on change for Material UI Select component
- Material UI Select Component- A component is changing a controlled input of type text to be uncontrolled
- Handle change on Autocomplete Component from material ui
- How to make the whole Card component clickable in Material UI using React JS?
- Syntax Error when test component with SASS file imported
- how to make material data grid width to fill the parent component in react js
- How to make a 'Select' component as required in Material UI (React JS)
- Remove underline from Input component Material UI (v1.0 Beta)
- Material UI tooltip doesn't display on custom component, despite spreading props to that component
- Using the Material UI Link component with the Next.JS Link Component
- Material UI v4 makeStyles exported from a single file doesn't retain the styles on refresh
- What is the alternative of makeStyles for Material UI v.5
- Add element inside TextField component - Material UI
- Material UI + Enzyme testing component
- Is there a performance difference between the sx prop and the makeStyles function in Material UI?
- How to update the state of a sibling component from another sibling or imported component in REACT
- Typed props when using Material UI makeStyles
- Compile error using the Component Lab > Autocomplete feature for SVG Icons in Material UI
- Material UI component reference does not work
- How to test Material UI Select Component with React Testing Library
- Removing underline style of autocomplete in react material ui component
- How can I use CSS @media for responsive with makeStyles on Reactjs Material UI?
- Make a Material UI Component in React Sticky when scrolling (not AppBar)
- Manipulating visibility of a Material UI/React Badge component based on content in the badgeContent
- Capturing Tab Key on Material UI AutoComplete Component
More Query from same tag
- nested setInterval going into negative numbers
- Cannot Open Dev Menu on Xiaomi Devices
- How to show validation errors sent from Node.js API to Next.js
- Representing URL Queries in React Router v4
- Promise both resolves and rejects
- How do you change the width of a div when printing?
- Divide js array in 2 components
- How to remove an array from another array in redux state javascript
- Is this.setState() of react.js synchronous or asynchronous?
- Rendering all nested objects from object in React
- Unable to call function inside context hook
- useEffect. Find the parent component that defines it and wrap that definition in useCallback
- Applying State to Nested Object in React. How do I call API and display with Use Effect
- How to export function in ReactJS
- How to know the useful height of an iOS device in React Native?
- CSS doesn't shows when load a component
- Add input field on click react js from form object
- babel-loader not working, Unexpected token '<'
- React's element node doesn't have css properties when declared with css modules
- Chat widget with react.js
- How to dispatch outside of class component in reactjs / redux?
- Is it a best practice to only supply props shallowly in React components?
- Props is an empty object in my react-redux component
- How to use typescript with the definition of custom styles for a select using react-select
- React: is it true that react completes all updates within one cycle of reflow
- Make VSCode apply syntax highlighting to .tsx files
- Render same component in beforeAll/beforeEvery: testing-library/react
- Update state value of single object in an array
- Failed to load plugin 'flowtype' declared in 'package.json ยป eslint-config-react-app': Cannot find module 'eslint/use-at-your-own-risk'
- Prevent div-overlapping only on window resize (w/ Styled Components)