DataGrid - Joy UI integration #6811
Replies: 8 comments 26 replies
-
|
As an alternative to 1., assuming that Grid subcomponents work with themes and they have configurable slots, there could be a theme provider setting the default values of function MaterialUIThemeProvider({children}) {
const materialUiTheme = createTheme({
components: {
GridPanel: {
defaultProps: {
slots: {
paper: MaterialPaper
...
}
}
}
}
});
return <ThemeProvider theme={materialUiTheme}>
{children}
</ThemeProvider>
} |
Beta Was this translation helpful? Give feedback.
-
|
Yep, both should be supported. The The // DataGrid + Material UI
import { components } from '@mui/x-data-grid/material';
<ThemeProvider theme={createTheme({
components: {
GridPagination: {
defaultProps: {
slots: {
...
}
}
}
}
})}>
<DataGrid components={components} />
</ThemeProvider>Similar to Joy UI: // DataGrid + Joy UI
import { components } from '@mui/x-data-grid/joy';
<CssVarsProvider theme={extendTheme({
components: {
GridPagination: {
defaultProps: {
slots: {
...
}
}
}
}
})}>
<DataGrid components={components} />
</CssVarsProvider> |
Beta Was this translation helpful? Give feedback.
-
|
@siriwatknp I think it will be possible to switch between design libraries on the theme level as well: // DataGrid + Material UI
import type {} from '@mui/x-data-grid/themeAugmentation';
import { components } from '@mui/x-data-grid/material';
<ThemeProvider theme={createTheme({
components: {
MuiDataGrid: {
defaultProps: { slots: components }
}
}
})}>
<DataGrid />
</ThemeProvider>// DataGrid + Joy UI
import type {} from '@mui/x-data-grid/themeAugmentation';
import { components } from '@mui/x-data-grid/joy';
<CssVarsProvider theme={extendTheme({
components: {
MuiDataGrid: {
defaultProps: { slots: components }
}
}
})}>
<DataGrid />
</CssVarsProvider> |
Beta Was this translation helpful? Give feedback.
-
|
Then DataGrid does not need to use Take import * as React from 'react';
- import { useGridRootProps } from '../hooks/utils/useGridRootProps';
+ import { useTheme } from '@mui/system';
export const GridHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
function GridHeader(props, ref) {
- const rootProps = useGridRootProps();
+ const theme = useTheme();
+ const { slots, slotProps } = theme.components.MuiDataGrid.defaultProps;
return (
<div ref={ref} {...props}>
- <rootProps.components.PreferencesPanel {...rootProps.componentsProps?.preferencesPanel} />
- {rootProps.components.Toolbar && (
- <rootProps.components.Toolbar {...rootProps.componentsProps?.toolbar} />
+ <slots.PreferencesPanel {...slotProps?.preferencesPanel} />
+ {slots.Toolbar && (
+ <slots.Toolbar {...slotProps?.toolbar} />
)}
</div>
);
},
); |
Beta Was this translation helpful? Give feedback.
-
I think both |
Beta Was this translation helpful? Give feedback.
-
|
Got it! 👍 |
Beta Was this translation helpful? Give feedback.
-
This would work, but another option would be to keep adapters in the data grid packages and use nested imports: // Community
import { components as materialDataGridcomponents } from '@mui/x-data-grid/material';
import { components as joyDataGridcomponents } from '@mui/x-data-grid/joy';
// Pro
import { components as materialDataGridcomponents } from '@mui/x-data-grid-pro/material';
import { components as joyDataGridcomponents } from '@mui/x-data-grid-pro/joy';
// Premium
import { components as materialDataGridcomponents } from '@mui/x-data-grid-premium/material';
import { components as joyDataGridcomponents } from '@mui/x-data-grid-premium/joy';The Pros:
Cons:
What do you think? |
Beta Was this translation helpful? Give feedback.
-
|
@oliviertassinari If I want to use DataGrid with Joy UI, by doing this, do I have to install Material UI? // If I don't install Material UI, the import below will throw error, right?
import { DataGrid as DataGridMd, DataGridUnstyled } from '@mui/x-data-grid-pro';
import { components } from '@mui/x-data-grid-pro/joy';
<DataGridUnstyled components={components} /> |
Beta Was this translation helpful? Give feedback.
-
I was thinking about using Material UI by default in v6. |
Beta Was this translation helpful? Give feedback.
-
Yes, but you don't need to import |
Beta Was this translation helpful? Give feedback.
-
@siriwatknp if Material UI isn't installed, it would work in production mode but throw in dev mode because tree shaking isn't applied in dev mode in the current toolings of the community, e.g. webpack. So, great point. My proposal doesn't work. I would suggest we use a one level deep folder import instead, e.g. -import { DataGridUnstyled } from '@mui/x-data-grid-pro';
+import DataGridUnstyled from '@mui/x-data-grid-pro/DataGridUnstyled'; |
Beta Was this translation helpful? Give feedback.
-
|
@cherniavskii @oliviertassinari I think I got all answers and looks like we won't have breaking changes to support Joy UI. To reduce the effort and allow the work to continually merge to
and keep converting the Material UI usage to If this looks okay to you, I will create an issue that lists all the components that need to be extracted and start from there. |
Beta Was this translation helpful? Give feedback.
-
Not sure I follow this one. |
Beta Was this translation helpful? Give feedback.
-
Nice, this looks great! |
Beta Was this translation helpful? Give feedback.
-
Does it mean that data grid has to export it's own theme? |
Beta Was this translation helpful? Give feedback.
-
|
I feel that #6811 (comment) solution would be a better fit in this context. |
Beta Was this translation helpful? Give feedback.
-
|
@oliviertassinari Would we have to create a separate variable for each property? Here's what the grid uses
|
Beta Was this translation helpful? Give feedback.
-
|
@cherniavskii Yeah, IMHO it's a no-go. It doesn't make sense to extend the general design system tokens for one component. I think that it should be grouped, like under a |
Beta Was this translation helpful? Give feedback.
-
If we follow https://www.notion.so/mui-org/Weekly-meeting-2022-10-18-0566064ded784ef786b163b1c8dff280#318f195cd796489bb3448cb9772cc1c4. I think that it's also an opportunity to use |
Beta Was this translation helpful? Give feedback.
-
|
Interesting! |
Beta Was this translation helpful? Give feedback.
-
|
I think that
The date picker & lab have |
Beta Was this translation helpful? Give feedback.
-
Yes, I think duplication is the main concern here. If
Wow, I did not know about this transitive peer dependencies issue. Then indeed, |
Beta Was this translation helpful? Give feedback.
-
|
One more problem to solve: How to get the theme inside of the It won't be possible once we decouple the data grid from the @mui/material package...
|
Beta Was this translation helpful? Give feedback.
-
|
Since it's used for RTL, I think that you could import it from |
Beta Was this translation helpful? Give feedback.
-
|
Could you share more details on how this would work? |
Beta Was this translation helpful? Give feedback.
-
|
The same theme context is used today. However, with @mnajdova @siriwatknp we saw many opportunities to have a different theme context. It would solve mui/material-ui#25852, the progressive adoption of Joy UI from Material UI: https://mui.com/joy-ui/guides/using-joy-ui-and-material-ui-together/ is not welcoming (I had a friend who gave up using Joy UI because of it). I have tried to search for an issue on https://github.com/emotion-js/emotion about it but I couldn't. |
Beta Was this translation helpful? Give feedback.
-
|
Got it, thanks for the explanation! |
Beta Was this translation helpful? Give feedback.
-
|
Is this closed as no longer planned? |
Beta Was this translation helpful? Give feedback.
-
|
@nlarusstone Our current plan:
Thoughts on this? Back to your initial question. We still plan to solve the same problem, but with a different solution. Now the plan is the plan until the plan changes 😁. Still, I feel like we should go all-in into this. |
Beta Was this translation helpful? Give feedback.
-
|
Got it, thank you for the clarification. An unstyled data grid like #10143 sounds great! We like Joy UI, so putting it into maintenance mode is a little sad, but understand you have to prioritize focus. Any idea on timing for MUI v8? |
Beta Was this translation helpful? Give feedback.
-
Motivation
@mui/material-nextis another design library)Ideal goals
Small breaking changes as much as possibleWe won't have a breaking change because@mui/materialis already a peer dependency. Need to update the build script to addpackage.jsontoDataGridJoyfolder.Direct usage of Material UI
Here is the list of the direct Material UI usage in DataGrid that should be extracted, so that DataGrid does not depend on Material UI:
1.
@mui/material/utilsThis should be safe to switch to
@mui/utilsand mark it as a dependency of DataGrid.Components on top of Material UI
For example, GridMenu is created by Popper, Grow, ...Material UI components.
mui-x/packages/grid/x-data-grid/src/components/menu/GridMenu.tsx
Line 110 in 514ed0d
Migration:
Convert these components into slots (DataGrid already provides a React context for doing this, so this should be fine).
Then create the mapping slots that use Material UI or Joy UI components. It could look like this:
Material UI Adapter package:
Joy UI Adapter package:
2. Material UI's
styledFor example, GridRowCount. These components are design-agnostic, so there is no need for them to move to slots.
mui-x/packages/grid/x-data-grid/src/components/GridRowCount.tsx
Line 33 in 2f186c3
Migration:
Switch to
styledfrom MUI System. The theming API does not differ, except thesxprop which will be fixed from the core repo. mui/material-ui#35150 moves thesxlogic to the theme, which allows each adapter to configure its ownsxlogic.Meaning, developers can use
sxprop for DataGrid components that are not slots:3. Material UI theme tokens
For example, GridOverlay
mui-x/packages/grid/x-data-grid/src/components/containers/GridOverlay.tsx
Line 38 in 2f186c3
Migration:
Move palette usage to CSS variables (the values will be defined in the GridRootStyles of each design adapter).
const GridOverlayRoot = styled('div', { name: 'MuiDataGrid', slot: 'Overlay', overridesResolver: (props, styles) => styles.overlay, })(({ theme }) => ({ ..., - backgroundColor: alpha(theme.palette.background.default, theme.palette.action.disabledOpacity), + backgroundColor: 'var(--mui-data-grid-overlay-bg)', }));For
theme.typography.*usage, we can set the specific typography system for the DataGrid:const GridEditInputCellRoot = styled(InputBase, { name: 'MuiDataGrid', slot: 'EditInputCell', overridesResolver: (props, styles) => styles.editInputCell, })(({ theme }) => ({ - ...theme.typography.body2, + ...theme.typography.datagrid?.small, // naming can be different. padding: '1px 0', '& input': { padding: '0 16px', height: '100%', }, }));Beta Was this translation helpful? Give feedback.
All reactions