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

[DataGrid] Make colors customizable #12614

Merged
merged 10 commits into from
Apr 11, 2024
Merged

[DataGrid] Make colors customizable #12614

Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
59359a1
feat: grid customizeable colors
romgrk Mar 29, 2024
83dd6e5
docs: add theme doc
romgrk Mar 29, 2024
623f155
lint
romgrk Mar 29, 2024
fa668f3
Update docs/data/data-grid/style/style.md
romgrk Apr 3, 2024
868ef56
Update docs/data/data-grid/style/style.md
romgrk Apr 3, 2024
7ce8423
update
romgrk Apr 3, 2024
10e610f
doc: update
romgrk Apr 3, 2024
7879d60
lint
romgrk Apr 3, 2024
b3a6a01
Merge branch 'master' into feat-grid-styling-colors
romgrk Apr 4, 2024
63b46de
lint
romgrk Apr 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
feat: grid customizeable colors
  • Loading branch information
@romgrk
romgrk committed Mar 29, 2024
commit 59359a154df7811668cd14a26b67bce26e03e5b3
13 changes: 11 additions & 2 deletions packages/x-data-grid/src/components/containers/GridRootStyles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,15 @@ const columnHeaderStyles = {
},
};

declare module '@mui/material' {
interface Mixins {
MBilalShafi marked this conversation as resolved.
Show resolved Hide resolved
DataGrid: {
romgrk marked this conversation as resolved.
Show resolved Hide resolved
containerBackground?: string;
pinnedBackground?: string;
MBilalShafi marked this conversation as resolved.
Show resolved Hide resolved
}
}
}

export const GridRootStyles = styled('div', {
name: 'MuiDataGrid',
slot: 'Root',
Expand Down Expand Up @@ -126,9 +135,9 @@ export const GridRootStyles = styled('div', {

const containerBackground = t.vars
? t.vars.palette.background.default
: t.palette.background.default;
: (t.mixins.DataGrid?.containerBackground ?? t.palette.background.default);

const pinnedBackground = containerBackground;
const pinnedBackground = t.mixins.DataGrid?.pinnedBackground ?? containerBackground;

const overlayBackground = t.vars
? `rgba(${t.vars.palette.background.defaultChannel} / ${t.vars.palette.action.disabledOpacity})`
Expand Down
Loading