Paging panel buttons are out of alignment with material UI core 3.1.0

[stclairdaniel]

• [ x] I have searched this repository's issues and believe that this is not a duplicate.

I'm using ...

• [x ] React Grid
• React Chart
• Vue Grid

Current Behaviour

See screenshot:

Expected Behaviour

Arrow buttons and page buttons should be aligned

Steps to Reproduce (for Bugs)

Use a PagingPanel with "@devexpress/dx-react-grid-material-ui": "1.7.2", (and all other devexpress packages at 1.7.2 as well) and "@material-ui/core": "3.1.0" The problem does not exist in 3.0.1.

Environment

• devextreme-reactive: none
• react: 16.3.0
• vue: none
• browser: Chrome
• bootstrap: none
• react-bootstrap: none
• material-ui: ^3.0.1

Note - This could very well be my fault - I noticed everything looks fine on your demo page, but I see the package.json uses @material-ui/core": "^3.0.1", which will install 3.1.0. When I use MUI 3.0.1, everything looks great as it always have, but if I change to 3.1.0, I see the issue.

Also, if I remove the height style from .Pagination-arrowButton, the issue disappears. This could obviously be a material issue - please let me know if it seems that way and I can try to open an issue there.

[sethduncan]

I have the same issue. This could possibly be related to mui/material-ui#12865 ?

[TheMoonDawg]

I believe the issue lies in this changeset in IconButton: https://github.com/mui-org/material-ui/pull/12865/files#diff-fde406414bd717fcea45f653b5632078

They switched from resizing the actual component itself to adjusting its padding whenever changing the size of IconButton.

[lock]

This thread has been automatically locked since it is closed and there has not been any recent activity. Please open a new issue for related bugs or feature requests.