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.