Certain styling broken by DX's migration to MUI v5

[charmsRace]

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

[marcbambalan]

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.