Tubular-react is overwriting my css react-material-ui
veronesecoms opened this issue · 18 comments
Describe the bug
I have a page called Home, in this page i have a drawer and a route switch to show my components right the drawer:
return (
<div className={classes.root}>
<Router history={history}>
<CssBaseline />
<AppBar
position="fixed"
className={clsx(classes.appBar, {
[classes.appBarShift]: open,
})}
>
<Toolbar>
<IconButton
color="inherit"
aria-label="open drawer"
onClick={handleDrawerOpen}
edge="start"
className={clsx(classes.menuButton, open && classes.hide)}
>
<MenuIcon />
</IconButton>
<Typography variant="h6" noWrap>
{nameScreen}
</Typography>
</Toolbar>
</AppBar>
<Drawer
className={classes.drawer}
variant="persistent"
anchor="left"
open={open}
classes={{
paper: classes.drawerPaper,
}}
>
<Link to="/">
<img className={classes.logo} alt="Incca Sistemas" src="/assets/logo-incca.png"></img>
</Link>
<div className={classes.drawerHeader}>
<Typography className={classes.emailUserLogged} component="h6">{userLogged.login ? userLogged.login.toLowerCase() : ''}</Typography>
<IconButton onClick={handleDrawerClose}>
{theme.direction === 'ltr' ? <ChevronLeftIcon /> : <ChevronRightIcon />}
</IconButton>
</div>
<Divider />
<List>
<ListItem component={Link} to={'/usuarios'} button key={'Usuários'}>
<ListItemIcon><PeopleIcon /></ListItemIcon>
<ListItemText primary={'Usuários'} />
</ListItem>
<ListItem component={Link} to={'/filiais'} button key={'Filiais'}>
<ListItemIcon><BusinessIcon /></ListItemIcon>
<ListItemText primary={'Filiais'} />
</ListItem>
</List>
</Drawer>
<main
className={clsx(classes.content, {
[classes.contentShift]: open,
})}
>
<div className={classes.drawerHeadert} />
<Switch>
<Route path="/usuarios">
<Users />
</Route>
<Route path="/filiais">
<Companies />
</Route>
</Switch>
</main>
</Router>
</div>
);
In my route "Usuarios" i have the tubular-react:
const Usuarios = () => {
const columns = [new ColumnModel('OrderID'), new ColumnModel('CustomerName'), new ColumnModel('ShipperCity')];
return (
<DataGrid columns={columns} dataSource={'https://tubular.azurewebsites.net/api/orders/paged'} gridName="Grid" />
)
}
When i enter to this route, some things in my layout changed.
This is my template when i don't have a tubular-react:
This is my User template that have the tubular-react:
As you can see, my header background changed blue to white;
It add a hamburg icon button to the header;
My lateral drawer loses the padding in the list items.
Additional context
Add any other context about the problem here.
This is my package.json dependencies:
"dependencies": {
"@material-ui/core": "^4.9.4",
"@material-ui/icons": "^4.9.1",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"axios": "^0.19.2",
"formik": "^2.1.4",
"notistack": "^0.9.8",
"react": "^16.13.0",
"react-dom": "^16.13.0",
"react-history": "^0.18.2",
"react-input-mask": "^2.0.4",
"react-redux": "^7.2.0",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.0",
"redux": "^4.0.5",
"redux-saga": "^1.1.3",
"styled-components": "^5.0.1",
"tubular-react": "^4.1.12",
"yup": "^0.28.1"
},
Hi @veronesecoms,
Thanks for your report and the information provided on it. We will be checking it ASAP.
I have replicated the issue on a codesandbox.
We have seen this issue before whenever you're not working with the latest version of MUI. If possible, could you please upgrade your MUI version to the latest one? This is the fastest way to get rid of the issue. In the meantime, we will continue troubleshooting to see if we're able to fix it from the root.
Thank you, @veronesecoms
Which version of material design react ui i have to put in the package.json to work?
I put the core 4.9.5 (latest stable version) but i still have this issue
Weird, by looking at https://codesandbox.io/s/little-breeze-r3snc
You can quickly switch between 4.9.4 and 4.9.5 and I'm seeing that using 4.9.4 the issue is replicating. But not when using 4.9.5.
@kadosh in your codebox, remove the LocalGrid and seems your header color change...
@kadosh also you can see the padding that the drawer gains without the LocalGrid component...
Yes, I'm aware of that. The thing is that I'm still not getting the root cause. But if you change the MUI core version to 4.9.5 in there, the issue is not present anymore, even with the LocalGrid.
ok i will try to reinstall the MUI version
Status?
Just ran into this. Seems to happen if the version of material UI in your app's package.json doesn't match the version specified in tubular-react's dependencies. In my case, I had "@material-ui/core": "^4.9.10", while tubular-react specified "@material-ui/core": "^4.9.8". When that was the case, I could see the same style classes being written to the head twice, causing weird behavior. When I changed my version to match tubular exactly (4.9.8), the issue went away.
Any updates on this? This seems like quite a major bug, where using this project means that you will introduce a strong dependency, when it is required that tubular-react always matches exactly what is being published by @material-ui.
We haven't been able to identify the root cause of this problem. We will definitely review this in detail, but unfortunately, we don't have a deadline for it. If anybody has additional information it would be greatly appreciated.
Your mileage may vary, but if you wrap your Tubular Grid in a ThemeProvider, it isolates the styles from the rest of your app.
<ThemeProvider theme="light><DataGrid {...props} /></ThemeProvider>I believe this is likely caused by the issue I just fixed in #830
What I expect is happening in your case is that the custom styles are being replaced by the addition of a duplicate MUI styles which you are overriding.
You can check if this is the case by looking at the styles in the header tag in chrome inspector. If there are duplicate values in the data-meta="<value>" attributes on the added styles then it is likely resolved by the changes in #830
hey @veronesecoms, @TheJeffer , @slhck
Could you please let us know if the problem is fixed using 4.2.2 (which includes the fix made by @nickpalmer )
Thanks.
Using tubular-react 4.2.5 with MUI 4.11.0 (latest) still have the same issue. Still have replication of MUI-styles
The dirty hack that worked (based on this commentis to change "@material-ui/core" dependency to peerDependencies in tubular-react. But again, probably not going to work once MUI versions for the app and tubular-react in dependencies will be different.
Please check the meta tags on all the style headers in the browsers developer console. You should not see any headers that have your custom component names BEFORE ones with MUI names.
Oh, sorry, I misunderstood your issue. Based on your resolution of the issue, yours is not the same.
Yes, having multiple versions of MUI in your applications will for sure cause problems as MUI does not have correct global state. This is a problem with the implementation of MUI though and tubular-react cannot do anything about this issue. MUI should be checking the meta tags on the styles before adding a style but it doesn't.
If you are using yarn then you can use the resolutions block in package.json to force the mui-version to be the same everywhere. If you are using npm you can use npm-force-resolutions package to achieve the same result.
"resolutions": {
"@material-ui/core": "4.11.0"
},
tubular-react probably should be specifying mui dependencies as peer dependencies to allow the version decision to be made at a higher level the same as @material-ui/pickers does for example. Happy to submit a PR with that change.