Open punit1108 opened 1 year ago
Hey @punit1108 Could you provide a minimal reproduction example? Thanks!
@cherniavskii The error doesnt seem to be reproducible in other system/Online IDEs
Having done some debugging, it is unable to find, theme.shape.borderRadius
on line number 121. The filename is GridRootStyles.js.
Not sure if that helps. Put this here anyways.
Update -
This is where the code is breaking, mind that a lot of other properties are defined.
Also -
The above component SystemDataViewer
is nested inside PageContent
<div className="App">
<CssVarsProvider>
<Navbar />
<Token/>
<PageContent></PageContent>
</CssVarsProvider>
</div>
The error doesnt seem to be reproducible in other system/Online IDEs
Can you create a public repo that I can use to reproduce the error?
Do you use a custom theme maybe?
Thanks @punit1108 I've created this minimal example: https://codesandbox.io/s/infallible-spence-qs9yqj?file=/demo.tsx It seems like the issue is caused by an incompatibility between the Joy UI CSS vars theme and MUI X DataGrid.
To fix it, you should wrap the grid into CssVarsProvider
from @mui/material
:
import { Experimental_CssVarsProvider as MUICssVarsProvider } from '@mui/material/styles';
// ...
<MUICssVarsProvider>
// The grid goes here
</MUICssVarsProvider>
Here is a working demo: https://codesandbox.io/s/nifty-volhard-4q02x7?file=/demo.tsx
Ohh, i get it. But, somehow it doesnt make sense for @mui/joy
to not be compatible with DataGrid
.
Is there a plan to get the incompatibility fixed in near future, or using it this way is the only solution? In case its a bug, can an update be provided with incompatible components fixed?
For now, DataGrid uses the Material UI components by default, so it's only compatible with the Material UI theme.
We plan to work on DataGrid + Joy UI integration that would allow choosing between Joy UI and Material UI libraries and corresponding themes will be supported depending on the chosen library.
We have to cover this incompatibility in the docs and warn users if the Joy UI theme is detected.
I found this guide in Joy UI docs: https://mui.com/joy-ui/guides/using-joy-ui-and-material-ui-together/ It applies to the MUI X components as well (since they use Material UI components and theme), so we can link to it.
Duplicates
Latest version
Steps to reproduce πΉ
Link to live example:
Steps:
I added DataGrid to my code and tried populating the columns and rows
Current behavior π―
Page fails to load and gives the below error -
Expected behavior π€
Should render the table.
Context π¦
No response
Your environment π
``` I am using Edge Chromium for testing. System: OS: macOS 13.1 Binaries: Node: 18.12.1 - ~/.nvm/versions/node/v18.12.1/bin/node Yarn: Not Found npm: 8.19.2 - ~/.nvm/versions/node/v18.12.1/bin/npm Browsers: Chrome: 109.0.5414.87 Edge: Not Found Firefox: 109.0 Safari: 16.2 npmPackages: @emotion/react: ^11.10.5 => 11.10.5 @emotion/styled: ^11.10.5 => 11.10.5 @mui/base: 5.0.0-alpha.113 @mui/core-downloads-tracker: 5.11.4 @mui/icons-material: ^5.11.0 => 5.11.0 @mui/joy: ^5.0.0-alpha.62 => 5.0.0-alpha.62 @mui/material: ^5.11.4 => 5.11.4 @mui/private-theming: 5.11.2 @mui/styled-engine: 5.11.0 @mui/system: 5.11.4 @mui/types: 7.2.3 @mui/utils: 5.11.2 @mui/x-data-grid: ^5.17.20 => 5.17.20 @types/react: ^18.0.26 => 18.0.26 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 typescript: ^4.9.4 => 4.9.4 ```npx @mui/envinfo