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’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[DataGrid] Unable to override default props/styling for GridActionsCellItem #7619

Open
2 tasks done
Nitzperetz opened this issue Jan 19, 2023 · 6 comments · May be fixed by #7635
Open
2 tasks done

[DataGrid] Unable to override default props/styling for GridActionsCellItem #7619

Nitzperetz opened this issue Jan 19, 2023 · 6 comments · May be fixed by #7635
Labels
bug 🐛 Something doesn't work component: data grid This is the name of the generic UI component, not the React module! customization: css Design CSS customizability

Comments

@Nitzperetz
Copy link

Nitzperetz commented Jan 19, 2023

Duplicates

  • I have searched the existing issues

Latest version

  • I have tested the latest version

Steps to reproduce 🕹

Overriding theme for MuiDataGrid was added in v5.0.0, however not all DataGrid Types were added like - GridActionsCellItem

{

   overrides: {
     // MuiDataGrid override works:
     MuiDataGrid: {
         root: {
           ...
         }
      },   
     // GridActionsCellItem override doesn't work:
     GridActionsCellItem: {
         root: {
           ...
         }
      },        
   },
}

Current behavior 😯

Unable to override theme for GridActionsCellItem.

Expected behavior 🤔

Override GridActionsCellItem defaultProps and styling.

Context 🔦

Overriding the theme in MUI is a feature I use in almost every component in order to align UX/UI. The only component I wasn't able to customize is the cell item for now.

Openning this issue as requested here.

Your environment 🌎

Browser is not relevant.
Having issues with running the command. Will update the issue once it's fixed.

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

Order ID 💳 (optional)

No response

@Nitzperetz Nitzperetz added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Jan 19, 2023
@zannager zannager added the component: data grid This is the name of the generic UI component, not the React module! label Jan 19, 2023
@cherniavskii cherniavskii added bug 🐛 Something doesn't work customization: css Design CSS customizability and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Jan 19, 2023
@cherniavskii
Copy link
Member

Thanks for opening the issue!

For styleOverrides, I believe it should look like this:

const theme = createTheme({
  components: {
    MuiDataGrid: {
      styleOverrides: {
        actionsCellItem: {
          // ...
        }
      }
    }
  }
});

It doesn't work though, it's a bug.

For the defaultProps, from what I can tell you can only pass the props to the root component (DataGrid):

const theme = createTheme({
  components: {
    MuiDataGrid: {
      defaultProps: {
        // ...
      }
    }
  }
});

@LukasTy
Copy link
Member

LukasTy commented Jan 20, 2023

Hello @Nitzperetz
Data grid package has a somewhat different theme overriding approach to date-pickers if you are comparing the two by any chance.
As @cherniavskii mentioned, DataGrid only allows overriding both props and styles on the root element itself.
Do you have any particular use case where you would want certain defaultProps on GridActionsCellItem?

As for the style overrides, you can find the possible classes you can target here.
Here is an example of how it's possible to override actionsCell styles. On this you are correct. There is no actionsCellItem option, but as you can see—there is already a PR created by @cherniavskii to add it in.

You might also expect that applying the following change should produce the same result.

 const theme = createTheme({
   components: {
     MuiDataGrid: {
       styleOverrides: {
-        root: {
+        actionsCell: {
-          [`.${gridClasses.actionsCell}`]: {
             backgroundColor: "red"
-           }
         }
       }
     }
   }
 });

But that is not the case, because the given component isn't a styled one and does not support direct overrides.
Which is probably an issue on our side (@mui/xgrid), because based on typing support—you could expect that to work as well.

As with anything, it's best to explain your case with as clear examples as possible. It's always perfect if you provide a codesandbox with what is the end goal you are trying to achieve.

@cherniavskii
Copy link
Member

@LukasTy I think this should work:

styleOverrides: {
  actionsCell: {
    backgroundColor: "red"
  }
}

The same way as this works: https://codesandbox.io/s/tender-bird-vikzq5?file=/demo.tsx

styleOverrides: {
  row: {
    backgroundColor: "red"
  }
}

But that is not the case, because the given component isn't a styled one and does not support direct overrides

I don't think it's related to styled.
Those overrides only work if style overrides are handled in GridRootStyles - see https://github.com/mui/mui-x/pull/7635/files#r1084306896

@LukasTy
Copy link
Member

LukasTy commented Jan 23, 2023

But that is not the case, because the given component isn't a styled one and does not support direct overrides

I don't think it's related to styled.

Yes, sorry for not expressing myself correctly. For named style overrides to work they need to be consumed by any styled components' overridesResolver.
Here is a working example with your mentioned way of overriding it on your PR.

@cherniavskii
Copy link
Member

For named style overrides to work they need to be consumed by any styled components' overridesResolver.

Makes sense 👍
In this case, the GridRootStyles's overridesResolver consumes those overrides

@Nitzperetz
Copy link
Author

Nitzperetz commented Jan 25, 2023

Thank you all for replying!

As @cherniavskii mentioned, DataGrid only allows overriding both props and styles on the root element itself.
Do you have any particular use case where you would want certain defaultProps on GridActionsCellItem?

I am in need to align GridActionsCellItem component across the app.
For styling I wanted to change fontSize.
For PropsOverride the need is to set showInMenu to be true by default.

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! customization: css Design CSS customizability
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants