Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

[data grid] Undefined ownerState when customizing theme. #4413

Closed
2 tasks done
joserodolfofreitas opened this issue Apr 8, 2022 · 6 comments
Closed
2 tasks done

[data grid] Undefined ownerState when customizing theme. #4413

joserodolfofreitas opened this issue Apr 8, 2022 · 6 comments
Labels
bug 馃悰 Something doesn't work component: data grid This is the name of the generic UI component, not the React module! good first issue Great for first contributions. Enable to learn the contribution process. plan: Pro Impact at least one Pro user

Comments

@joserodolfofreitas
Copy link
Member

joserodolfofreitas commented Apr 8, 2022

Duplicates

  • I have searched the existing issues

Latest version

  • I have tested the latest version

Current behavior 馃槸

When trying to customize themes using overrides based props, the ownerState passed as parameter is undefined.

Expected behavior 馃

ownerState to contain props.

Steps to reproduce 馃暪

Steps:

  1. Open https://codesandbox.io/s/datagriddemo-theme-override-hwj2y8?file=/demo.js
  2. Debug message is displayed on the console.

Context 馃敠

No response

Your environment 馃寧

`npx @mui/envinfo`
  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Order ID 馃挸 (optional)

32000

@joserodolfofreitas joserodolfofreitas added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Apr 8, 2022
@oliviertassinari
Copy link
Member

Should we do

diff --git a/packages/grid/x-data-grid/src/components/containers/GridRoot.tsx b/packages/grid/x-data-grid/src/components/containers/GridRoot.tsx
index 7568526d..77c79769 100644
--- a/packages/grid/x-data-grid/src/components/containers/GridRoot.tsx
+++ b/packages/grid/x-data-grid/src/components/containers/GridRoot.tsx
@@ -28,6 +28,7 @@ const GridRoot = React.forwardRef<HTMLDivElement, GridRootProps>(function GridRo
   const totalRowCount = useGridSelector(apiRef, gridRowCountSelector);
   const rootContainerRef: GridRootContainerRef = React.useRef<HTMLDivElement>(null);
   const handleRef = useForkRef(rootContainerRef, ref);
+  const ownerState = rootProps;

   apiRef.current.rootElementRef = rootContainerRef;

@@ -59,6 +60,7 @@ const GridRoot = React.forwardRef<HTMLDivElement, GridRootProps>(function GridRo
       aria-multiselectable={!rootProps.disableMultipleSelection}
       aria-label={rootProps['aria-label']}
       aria-labelledby={rootProps['aria-labelledby']}
+      ownerState={ownerState}
       {...other}
     >
       {children}

and call it a day? Then, it's about fixing mui/material-ui#31982.

@oliviertassinari oliviertassinari added bug 馃悰 Something doesn't work component: data grid This is the name of the generic UI component, not the React module! and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Apr 9, 2022
@m4theushw m4theushw added the good first issue Great for first contributions. Enable to learn the contribution process. label Apr 11, 2022
@m4theushw
Copy link
Member

I still think that for https://mui.zendesk.com/agent/tickets/2922 global classes for density would be more useful. Maybe we re-open #4225

@mbrookes mbrookes added the plan: Pro Impact at least one Pro user label Apr 11, 2022
@lucasveigaf
Copy link

Any news on this? mui/material-ui#31982 is closed already

@iigrik
Copy link
Contributor

iigrik commented Aug 24, 2022

@lucasveigaf I've started working on it.

@lolaignatova
Copy link
Contributor

lolaignatova commented Jan 31, 2023

Hello oliviertassinari. Can you or somebody please help me with this MR?
I left a comment there to clarify two questions.

Thanks in advance

@m4theushw
Copy link
Member

Fixed by #7757

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 馃悰 Something doesn't work component: data grid This is the name of the generic UI component, not the React module! good first issue Great for first contributions. Enable to learn the contribution process. plan: Pro Impact at least one Pro user
Projects
None yet
7 participants