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.

Sign up for GitHub

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

Jump to bottom

[data grid] Theme styleOverrides are ignored #16159

Open
caillou opened this issue Jan 13, 2025 · 2 comments · May be fixed by #16272
Open

[data grid] Theme styleOverrides are ignored #16159

caillou opened this issue Jan 13, 2025 · 2 comments · May be fixed by #16272
Assignees
@KenanYusuf
Labels
bug 🐛 Something doesn't work component: data grid This is the name of the generic UI component, not the React module! customization: theme Centered around the theming features

Comments

@caillou
Copy link

caillou commented Jan 13, 2025 •
edited by github-actions bot
Loading

Steps to reproduce

Steps:

  1. Open this link to live example: https://codesandbox.io/p/sandbox/datagridpro-theming-with-class-names-x8dpq3?file=%2Fsrc%2FDemo.tsx

Current behavior

columnHeader--pinnedLeft and the filler--pinnedLeft have pink borders.

Expected behavior

The first column is pinned. Both the columnHeader--pinnedLeft and the filler--pinnedLeft should not have pink borders.

There is a way to get the desired behaviour, but this seems like a hack:

https://codesandbox.io/p/sandbox/laughing-sun-zz8p7c

Context

No response

Your environment

npx @mui/envinfo 
  System:
    OS: Linux 6.1 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
  Binaries:
    Node: 20.9.0 - /usr/local/bin/node
    npm: 9.8.1 - /usr/local/bin/npm
    pnpm: 8.10.2 - /usr/local/share/npm-global/bin/pnpm
  Browsers:
    Chrome: Not Found
  npmPackages:
    @emotion/react: latest => 11.14.0 
    @emotion/styled: latest => 11.14.0 
    @mui/icons-material: latest => 6.3.1 
    @mui/material: latest => 6.3.1 
    @mui/x-data-grid-generator: next => 8.0.0-alpha.7 
    @mui/x-data-grid-pro: next => 8.0.0-alpha.7 
    @types/react: latest => 19.0.6 
    react: latest => 19.0.0 
    react-dom: latest => 19.0.0 
    typescript: latest => 5.7.3

Search keywords: DataGridPro theme modifiers
@caillou caillou added bug 🐛 Something doesn't work status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Jan 13, 2025
@michelengelen michelengelen changed the title DataGridPro Theme Modifiers Are Ignored [data grid] Theme styleOverrides are ignored Jan 13, 2025
@michelengelen michelengelen added component: data grid This is the name of the generic UI component, not the React module! customization: theme Centered around the theming features and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Jan 13, 2025
@michelengelen
Copy link
Member

Not sure what is broken here .. @KenanYusuf could you have a look as well?

@github-project-automation github-project-automation bot moved this to 🆕 Needs refinement in MUI X Data Grid Jan 13, 2025
@michelengelen
Copy link
Member

Not sure what is broken here .. @KenanYusuf could you have a look?

Maybe this is a problem with the theme creation in general? 🤔
cc @mnajdova could you let someone from your team have a look as well?

@KenanYusuf KenanYusuf self-assigned this Jan 15, 2025
@KenanYusuf KenanYusuf moved this from 🆕 Needs refinement to 🏗 In progress in MUI X Data Grid Jan 15, 2025
This was referenced Jan 16, 2025
Open
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@KenanYusuf KenanYusuf

Labels
bug 🐛 Something doesn't work component: data grid This is the name of the generic UI component, not the React module! customization: theme Centered around the theming features
Projects
MUI X Data Grid
Status: 🏗 In progress
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[DataGrid] Add missing style overrides KenanYusuf/mui-x
3 participants
@caillou @KenanYusuf @michelengelen