[DataGrid] Text alignment is wrong

[oliviertassinari]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

The horizontal padding in the header is wrong:

https://mui.com/components/data-grid/

Expected behavior 🤔

https://material.io/components/data-tables

It's done correctly in https://mui.com/components/tables/ and https://ant.design/components/table/

Steps to reproduce 🕹

No response

Context 🔦

It was raised by a designer on https://mui.zendesk.com/agent/tickets/2094. It's also related it #1623 (about the column resize style)

Your environment 🌎

v5.2.2

Order ID 💳 (optional)

No response

[oliviertassinari]

It's a regression introduced in v4.0.0-alpha.29.

[wahajStar]

In datagridPro I resove in theme with css...
"&.MuiDataGrid-root .MuiDataGrid-columnHeaderTitleContainer": {padding:0}

[DanailH]

@wahajStar would you be interested in doing a PR with the fix? This looks to be solution:

--- a/packages/grid/_modules_/grid/components/containers/GridRootStyles.ts
+++ b/packages/grid/_modules_/grid/components/containers/GridRootStyles.ts
@@ -114,7 +114,6 @@ export const GridRootStyles = styled('div', {
       flex: 1,
       whiteSpace: 'nowrap',
       overflow: 'hidden',
-      padding: '0 6px',
     },
     [`& .${gridClasses.sortIcon}, & .${gridClasses.filterIcon}`]: {
       fontSize: 'inherit',

[wahajStar]

Hello @DanailH Actually I am new in mui not getting PR.
how its work?

[DanailH]

@wahajStar you can check the contribution guide for more info on how to open a PR https://github.com/mui-org/material-ui-x/blob/master/CONTRIBUTING.md

[wahajStar]

ok thanks