[DataGrid] Fix CSS footer spacing #268
Conversation
| @@ -1,5 +1,5 @@ | |||
| import * as React from 'react'; | |||
| import { ColDef, XGrid, GridOverlay, Footer, useApiRef, ApiRef } from '@material-ui/x-grid'; | |||
| import { ColDef, XGrid, GridOverlay, GridFooter, useApiRef, ApiRef } from '@material-ui/x-grid'; | |||
There was a problem hiding this comment.
Prefix public components with Grid, as we will re-export them from @material-ui/x later on, avoid conflicts.
| @@ -195,7 +195,7 @@ export const useStyles = makeStyles( | |||
| alignItems: 'center', | |||
| ...theme.typography.body2, | |||
| display: 'none', | |||
| paddingLeft: theme.spacing(2), | |||
| margin: theme.spacing(0, 2), | |||
There was a problem hiding this comment.
The fix, the rest is refactorization.
oliviertassinari
added
bug 🐛
oliviertassinari
force-pushed
the
fix-padding-bug
branch
from
ea5410f
to
534d315
Compare
| export function GridOverlay(props: DivProps) { | ||
| type GridOverlayProps = React.HTMLAttributes<HTMLDivElement>; | ||
|
|
||
| export function GridOverlay(props: GridOverlayProps) { |
There was a problem hiding this comment.
One this component, it seems that we can kill the <div className="MuiDataGrid-overlayContent" /> element. It will make customization easier. I will look closer at the issue later.
There was a problem hiding this comment.
Not sure, it's used in creating the no row message and error-message, and potentially more components.
There was a problem hiding this comment.
I'm saying that because I didn't see something in the CSS that would prevent. We will see, I could be wrong. It needs to be done in an isolated pull request anyway.
Fix margin on:
Also work a bit on #6.