Certain styling broken by DX's migration to MUI v5
charmsRace opened this issue · comments
Is there an existing issue for this?
- I have searched this repository's issues and believe that this is not a duplicate.
I'm using ...
React Grid
Current Behaviour
In <TableTreeExpandButton />
(and presumably elsewhere), you have set marginLeft: -theme.spacing(1)
. As of MUI v5, this is incorrect — theme.spacing
now returns a string with the suffix 'px'
(cf. migration notes). This means -theme.spacing(1)
evaulates to e.g. -'16px'
, which is NaN
. On the client, this ends up as marginLeft: NaNpx
and is ignored.
Looking through the bundled code in my node_modules/
and searching for -theme\.spacing\(\d+\)
, I see this is also in <TableTreeCheckbox />
. Anywhere the result of theme.spacing
is treated as a number needs to be fixed.
Expected Behaviour
DX components should correctly calculate margins instead of declaring NaN
.
Steps to Reproduce
Look at your code, or inspect this component's styling in literally any runtime environment.
Environment
- @devexpress/dx-core: 4.0.3
- @devexpress/dx-react-core: 4.0.3
- @devexpress/dx-react-grid: 4.0.3
- @devexpress/dx-react-grid-material-ui: 4.0.3
- @emotion/react: 11.10.0
- @emotion/styled: 11.10.0
- @mui/icons-material: 5.11.0
- @mui/material: 5.11.0
- @mui/styles: 5.11.0
- react: 18.0.0
Hello @charmsRace,
Thank you for letting us know about this issue. We decided to investigate it further in the following bug report: Reactive - theme.spacing returns NaNpx
when a negative sign is used before it. We will update that thread once we have any news.