how to prevent a material-ui package from overriding my app style? - reactjs

Question

I am using the latest Material-UI installation in a React-Gatsby app.
I installed a third party package for a carousel (react-material-ui-carousel).
When I use this package I see it overrides some of my material-ui styles by adding css divs that compete with my app's css divs.
the data-emotion divs are added by my app, and the data-jss style divs are added by the package react-material-ui-carousel.
Is there a way to limit the carousel styling only to the carousel component and not impact the other material-ui components on my page?
(for example the MuiButtonBase contains the MuiButtonBase-root rules that override my site's rules)

Answer 1

try to check your package-lock
and use 3 blocs
"node_modules/react-material-ui-carousel": {
"version": "2.3.7-mui5",
"resolved": "https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-2.3.7-mui5.tgz",
"integrity": "sha512-XM6+kn6db++riBKUufl7XQI8eE/qj5XWpkDpHUWnioICCdUqx6cvWJmIqjBqcMNB4FgcgJFVmsE3iEKs/4gRIA==",
"dependencies": {
"auto-bind": "^2.1.1",
"react-swipeable": "^6.1.0"
},
"peerDependencies": {
"#emotion/react": "^11.4.1",
"#emotion/styled": "^11.3.0",
"#mui/icons-material": "^5.0.0",
"#mui/material": "^5.0.0",
"#mui/styles": "^5.0.0",
"react": "^17.0.1",
"react-dom": "^17.0.1"
}
},
"react-material-ui-carousel": {
"version": "2.3.7-mui5",
"resolved": "https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-2.3.7-mui5.tgz",
"integrity": "sha512-XM6+kn6db++riBKUufl7XQI8eE/qj5XWpkDpHUWnioICCdUqx6cvWJmIqjBqcMNB4FgcgJFVmsE3iEKs/4gRIA==",
"requires": {
"auto-bind": "^2.1.1",
"react-swipeable": "^6.1.0"
}
},
"react-material-ui-carousel": "^2.3.7-mui5",

Answer 2

You can use StylesProvider from #material-ui/core/styles with this you can put prefix to classes names and avoid styles override
import {
MuiThemeProvider,
ThemeProvider,
StylesProvider,
createGenerateClassName,
} from '#material-ui/core/styles';
const generateClassName = createGenerateClassName({
seed: 'classes-custom-prefix',
});
export const Provider = ({ children, theme }) => {
return (
<StylesProvider generateClassName={generateClassName}>
<MuiThemeProvider theme={theme}>
<ThemeProvider theme={theme}>{children}</ThemeProvider>
</MuiThemeProvider>
</StylesProvider>
);
};

Answer 3

I was having issues/inconsistencies with styles between production and deploy. For me, the best way to style elements and override MUI styles without "!important" is using:
import { styled } from "#mui/material/styles";
import Button from "#material-ui/core/Button";
const CustomButton = styled(Button)(({ theme }) => ({
display: "flex",
...
}));
And then instead of using
<Button ...args>label</Button>
use
<CustomButton ...args>label</CustomButton>