I recently added in a Lab component (Alert) and it seems like that component brings along with it some @material-ui/styles that conflict with the existing styles from the Core components. I get an error message about the duplicate styles.
I've looked at the documentation for the error message and tried the suggested remedies: npm dedupe, but no luck.
In the two images you can see that the existing styling (ex. the header color) changes while the Alert is being shown at the bottom, and goes away when the Alert is dismissed.
I understand the error is that the Alert requires specific styling to display green on success, red on error, etc. but I'm not sure how to combine that with the existing styling.
I am not using Webpack, this is a single application. I have not defined any custom material-ui styling.
Before alert - regular styling
During alert - confliction of styling
EDIT
package.json
{
"name": "Safety_Dashboard",
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "cubejs-server"
},
"template": "docker",
"templateVersion": "0.27.53",
"devDependencies": {
"@cubejs-backend/postgres-driver": "^0.27.53",
"@cubejs-backend/server": "^0.27.53",
"@types/uuid": "^8.3.1",
"@typescript-eslint/parser": "^4.28.5",
"react-router-dom": "^5.3.0",
"typescript": "^4.3.5"
},
"dependencies": {
"@material-ui/core": "^4.12.2",
"@material-ui/data-grid": "^4.0.0-alpha.34",
"@material-ui/lab": "^4.0.0-alpha.60",
"@material-ui/pickers": "^3.3.10",
"@material-ui/x-grid-data-generator": "^4.0.0-alpha.34",
"@mui/icons-material": "^5.1.0",
"@nivo/core": "^0.73.0",
"@nivo/line": "^0.73.0",
"@visx/gradient": "^1.7.0",
"@visx/group": "^1.17.1",
"@visx/mock-data": "^1.7.0",
"@visx/react-spring": "^1.17.1",
"@visx/scale": "^1.14.0",
"@visx/shape": "^1.17.1",
"@visx/visx": "^1.18.1",
"codemirror": "^5.63.3",
"cytoscape-graphml": "^1.0.6",
"d3": "^7.0.0",
"js-convert-case": "^4.1.2",
"react-perfect-scrollbar": "^1.5.8",
"react-spring": "^9.2.4",
"xlsx": "^0.17.4"
}
}
package-lock.json (truncated)
"@material-ui/core": {
"version": "4.12.2",
"resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.12.2.tgz",
"integrity": "sha512-Q1npB8V73IC+eV2X6as+g71MpEGQwqKHUI2iujY62npk35V8nMx/bUXAHjv5kKG1BZ8s8XUWoG6s/VkjYPjjQA==",
"requires": {
"@babel/runtime": "^7.4.4",
"@material-ui/styles": "^4.11.4",
"@material-ui/system": "^4.12.1",
"@material-ui/types": "5.1.0",
"@material-ui/utils": "^4.11.2",
"@types/react-transition-group": "^4.2.0",
"clsx": "^1.0.4",
"hoist-non-react-statics": "^3.3.2",
"popper.js": "1.16.1-lts",
"prop-types": "^15.7.2",
"react-is": "^16.8.0 || ^17.0.0",
"react-transition-group": "^4.4.0"
},
"dependencies": {
"@material-ui/utils": {
"version": "4.11.2",
"resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.11.2.tgz",
"integrity": "sha512-Uul8w38u+PICe2Fg2pDKCaIG7kOyhowZ9vjiC1FsVwPABTW8vPPKfF6OvxRq3IiBaI1faOJmgdvMG7rMJARBhA==",
"requires": {
"@babel/runtime": "^7.4.4",
"prop-types": "^15.7.2",
"react-is": "^16.8.0 || ^17.0.0"
}
}
}
},
"@material-ui/lab": {
"version": "4.0.0-alpha.60",
"resolved": "https://registry.npmjs.org/@material-ui/lab/-/lab-4.0.0-alpha.60.tgz",
"integrity": "sha512-fadlYsPJF+0fx2lRuyqAuJj7hAS1tLDdIEEdov5jlrpb5pp4b+mRDUqQTUxi4inRZHS1bEXpU8QWUhO6xX88aA==",
"requires": {
"@babel/runtime": "^7.4.4",
"@material-ui/utils": "^4.11.2",
"clsx": "^1.0.4",
"prop-types": "^15.7.2",
"react-is": "^16.8.0 || ^17.0.0"
},
"dependencies": {
"@material-ui/utils": {
"version": "4.11.2",
"resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.11.2.tgz",
"integrity": "sha512-Uul8w38u+PICe2Fg2pDKCaIG7kOyhowZ9vjiC1FsVwPABTW8vPPKfF6OvxRq3IiBaI1faOJmgdvMG7rMJARBhA==",
"requires": {
"@babel/runtime": "^7.4.4",
"prop-types": "^15.7.2",
"react-is": "^16.8.0 || ^17.0.0"
}
}
}
},
"@material-ui/styles": {
"version": "4.11.4",
"resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.4.tgz",
"integrity": "sha512-KNTIZcnj/zprG5LW0Sao7zw+yG3O35pviHzejMdcSGCdWbiO8qzRgOYL8JAxAsWBKOKYwVZxXtHWaB5T2Kvxew==",
"requires": {
"@babel/runtime": "^7.4.4",
"@emotion/hash": "^0.8.0",
"@material-ui/types": "5.1.0",
"@material-ui/utils": "^4.11.2",
"clsx": "^1.0.4",
"csstype": "^2.5.2",
"hoist-non-react-statics": "^3.3.2",
"jss": "^10.5.1",
"jss-plugin-camel-case": "^10.5.1",
"jss-plugin-default-unit": "^10.5.1",
"jss-plugin-global": "^10.5.1",
"jss-plugin-nested": "^10.5.1",
"jss-plugin-props-sort": "^10.5.1",
"jss-plugin-rule-value-function": "^10.5.1",
"jss-plugin-vendor-prefixer": "^10.5.1",
"prop-types": "^15.7.2"
},
EDIT 2
Note: The tool I'm working on is a prototype, so I went ahead and just built a workaround component for myself that copies the styles from the troublesome Alert component. Here's the code I used in case anybody in the future wants to do something similar.
PopupAlert.tsx
import React from 'react';
import { Paper, Snackbar, Typography } from '@material-ui/core';
// import Alert, { Color } from '@material-ui/lab/Alert';
import { Color } from '@material-ui/lab/Alert';
import styles from './PopupAlert.module.css';
import {
CheckCircleOutline,
ErrorOutline,
InfoOutlined,
WarningOutlined,
} from '@material-ui/icons';
import { Variant } from '@material-ui/core/styles/createTypography';
interface PopupAlertProps {
open: boolean,
message: string,
type: Color,
autoHideDuration?: number,
onClose?: () => void
}
const PopupAlert:React.FC<PopupAlertProps> = ({open, message, type, autoHideDuration=6000, onClose}) => {
const [myOpen, setMyOpen] = React.useState<boolean>(open);
React.useEffect(() => {
setMyOpen(open);
}, [open])
function handleOnClose() {
setMyOpen(false);
if(onClose) onClose()
}
// NOTE: As of writing this, the Alert material-ui component in the lab package conflicts with
// stylings from components in the core package. So, I went ahead and copied over the styles from
// the Alert component manually. If they fix this, this component can be pretty much simplified
// into the one-liner commented out at the bottom "<Alert severity={type} />"
// Relevant post: https://stackoverflow.com/questions/70628413/react-mui-styling-confliction-using-core-and-lab-components-in-same-app
const classes = [styles.paper];
type === "success" && classes.push(styles.successPaper);
type === "info" && classes.push(styles.infoPaper);
type === "warning" && classes.push(styles.warningPaper);
type === "error" && classes.push(styles.errorPaper);
const vertical = "top";
const horizontal = "center";
const typographVariant: Variant = "h6";
return (
<Snackbar
anchorOrigin={{ vertical, horizontal }}
open={myOpen}
onClose={handleOnClose}
autoHideDuration={autoHideDuration}
>
<>
{ type === "success" &&
<Paper className={classes.join(' ')} elevation={0}>
<div className={styles.iconWrapper}>
<CheckCircleOutline className={styles.successIcon} />
</div>
<div className={styles.errorMessage}>
<Typography variant={typographVariant}>{message}</Typography>
</div>
</Paper>
}
{ type === "info" &&
<Paper className={classes.join(' ')} elevation={0}>
<div className={styles.iconWrapper}>
<InfoOutlined className={styles.infoIcon} />
</div>
<div className={styles.errorMessage}>
<Typography variant={typographVariant}>{message}</Typography>
</div>
</Paper>
}
{ type === "warning" &&
<Paper className={classes.join(' ')} elevation={0}>
<div className={styles.iconWrapper}>
<WarningOutlined className={styles.warningIcon} />
</div>
<div className={styles.errorMessage}>
<Typography variant={typographVariant}>{message}</Typography>
</div>
</Paper>
}
{ type === "error" &&
<Paper className={classes.join(' ')} elevation={0}>
<div className={styles.iconWrapper}>
<ErrorOutline className={styles.errorIcon} />
</div>
<div className={styles.errorMessage}>
<Typography variant={typographVariant}>{message}</Typography>
</div>
</Paper>
}
{/* <Alert severity={type} /> */}
</>
</Snackbar>
)
}
export default PopupAlert
PopupAlert.module.css
.paper {
display: grid;
grid-template-columns: auto 1fr;
column-gap: 10px;
padding: 6px 16px;
}
.iconWrapper {
margin: auto 0;
}
.successPaper {
color: rgb(30, 70, 32) !important;
background-color: rgb(237, 247, 237) !important;
}
.successIcon {
color: #4caf50 !important;
}
.infoPaper {
color: rgb(13, 60, 97) !important;
background-color: rgb(232, 244, 253) !important;
}
.infoIcon {
color: #2196f3 !important;
}
.warningPaper {
color: rgb(102, 60, 0) !important;
background-color: rgb(255, 244, 229) !important;
}
.warningIcon {
color: #ff9800 !important;
}
.errorPaper {
color: rgb(97, 26, 21) !important;
background-color: rgb(253, 236, 234) !important;
}
.errorIcon {
color: #f44336 !important;
}