I have developed a shared library using React and Storybook.
Within this library, I am utilizing the MUI V5 Button and making some style modifications using CSS modules.
I executed the "build&pack" script in my library, which generated a tgz package that I then imported into a new React application where it is included in my dependencies.
"dependencies": {
"shared-react": "/Users/..../shared-react-1.0.0.tgz"
}
When I import it into my app like this:
import './App.css';
import {ButtonCSSModule} from 'shared-react'
import * as React from 'react';
function App() {
return (
<div className="App">
<ButtonCSSModule variant="contained" disabled={false}></ButtonCSSModule>
</div>);
}
export default App;
it functions correctly: image
However, when I also import the MUI button alongside my custom button
import {Button} from '@mui/material';
import './App.css';
import {ButtonCSSModule} from 'shared-react'
import * as React from 'react';
function App() {
return (
<div className="App">
<ButtonCSSModule variant="contained" disabled={false}></ButtonCSSModule>
<Button variant={"contained"}>New Button From Material</Button>
</div>);
}
export default App;
the styling is overridden by MUI styles image
Is there a way to consistently overwrite the button style from @mui/material with my own styles (from my shared library)?
perhaps exporting the CSS files and importing them into my new app so whenever someone uses a material button, it will apply the styles I have created?
Here is the link to the library I created
Github link to library: https://github.com/itzikd15/test