[data grid] Changing columnHeaders className not working as expected about mui-x HOT 11 CLOSED

Hey @fdebef ... i am not sure why we did this change (@romgrk would be the best to answer this), but you can easily change the background color by using the CSS variable:

const defaultTheme: Theme = createTheme({
  typography: {
    fontSize: 14,
    fontFamily: 'Roboto Condensed',
  },
  components: {
    MuiDataGrid: {
      styleOverrides: {
        root: {
          '--DataGrid-containerBackground': 'rgb(69,153,236)',
        },
      },
    },
  },
});

That being said: @mui/xgrid should we maybe export a constant similar to gridClasses for the variables to make them easier to override?

from mui-x.

We needed access to the color. The doc explains how to customize it here: https://mui.com/x/react-data-grid/style/#theme-header-and-pinned-sections

from mui-x.

A bit confusing compared to columnHeaders but OK .
But neither you, nor documentation talks about the color property. (color of header text). How would you change it.

BUT!!!! Within playing with this stuff I think I've discovered the issue:
In version 6.8 you use the selector

.MuiDataGrid-columnHeaders

And so is it rescribed in documentation
https://mui.com/x/api/data-grid/data-grid/#DataGrid-css-MuiDataGrid-columnHeaders

But in 7.5 you switched to
.MuiDataGrid-columnHeader (omitting the last s)

Is it intention or mistake?

from mui-x.

We actually have both columnHeaders which is the container holding all headers and columnHeader which is a single header.

The color is defined on the root component, so a more specific selector should be easily able to overwrite that.

adding this will change the text color:

[`& .${gridClasses.columnHeader}`]: {
  color: 'white',
},

I do agree though that we could improve the theming capabilities, since this change would not affect the icon buttons.

@romgrk is currently working on making the grid theme agnostic, so insight here is very valuable.

For now we would need to use more specific selectors to target the icon buttons, etc. separately.

from mui-x.

I have tried in Stackblitz, and it really works. There is something wrong with my project, maybe relating to this issue, too:
#13483 (comment)

Might it be the combination of Tailwind and Mui? I really want to stay on Mui DataGrid, but need other styling with Tailwind.

from mui-x.

No, the combination of Tailwind and Mui X shouldn't be a problem.
We just recently (on a conference in Amsterdam) heard from users who effectively use both and it works great for them.

The only thing I could think if is the tailwind build-process.
But without knowing the setup it is hard to tell.

I will try and setup a project with it ... @joserodolfofreitas this might be another case to add as a how-to to the docs. WDYT?

from mui-x.

@fdebef can you provide your setup specifics, so we can check that? Otherwise there isn't really that much we can do right now unfortunately.

from mui-x.

I'm stuck here.
This is the simpliest project, where I experience different behavior in IntelliJIdea Ultimate (not working) and VS Code (working).
I've created very new project in IntelliJ and it behaves the same:
Issue with columnHeader/s
TypeScript type for Theme not working (another issue here)

I suggest to close this issue as it seems like it is not yours problem - in VS Code everything is working. A highly appreciate your effort to me, thank you very much.

from mui-x.

this might be another case to add as a how-to to the docs. WDYT?

Yes, for sure.
In fact, styling the Data Grid with Tailwind is one of the most relevant examples we want to showcase.

from mui-x.

I'm stuck here. This is the simpliest project, where I experience different behavior in IntelliJIdea Ultimate (not working) and VS Code (working). I've created very new project in IntelliJ and it behaves the same: Issue with columnHeader/s TypeScript type for Theme not working (another issue here)

I suggest to close this issue as it seems like it is not yours problem - in VS Code everything is working. A highly appreciate your effort to me, thank you very much.

@fdebef That's indeed strange. I am using IntelliJ Webstorm and there is no problem with it. But knowing the IDEs there is a ton of customization and settings that can totally change the behavior. I would try to check settings and plugins to see if something might be off there.

I will close this issue now, but feel free to comment a solution anyways if you find one so others encountering this problem can find it! Thanks! 🙇🏼

from mui-x.

⚠️ This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@fdebef: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

from mui-x.