Add a function to get the numeric value of theme.spacing

[paul23-git]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

I material ui before version 5 the result of theme.spacing(n) was a number. This was useful as one could easily do mathematics on that number.

I understand that adding px would be required by the new emotion engine/syntax, however could there be a separate function that just returns the calculated spacing in pixels? IE theme.pixelSpacing(n: number): number

Examples 🌈

const StyledResponsiveForm = styled(Dialog)(({theme}: {theme: Theme}) => css`
  margin-left: ${theme.spacing(3)};
  maring-right: ${theme.spacing(3)};
  ${theme.breakpoints.up(602+theme.spacing(2))} {
    margin-left: ${theme.spacing(4)};
    maring-right: ${theme.spacing(4)};
  }
`)

Should put a breakpoint (with default spacing settings) at 618 pixels.

Motivation 🔦

While some of this can be offset by letting the css engine use calc it's not everywhere possible on top of that the limitations of calc make some code much harder to read, while inlining the calculation would greatly reduce this.

A good example is for breakpoints in css:

const StyledResponsiveForm = styled(Dialog)(({theme}: {theme: Theme}) => css`
  margin-left: ${theme.spacing(3)};
  maring-right: ${theme.spacing(3)};
  ${theme.breakpoints.up(602+theme.spacing(2))} {
    margin-left: ${theme.spacing(4)};
    maring-right: ${theme.spacing(4)};
  }
`)

This should add a breakpoint at 618 pixels.

[ZeeshanTamboli]

Duplicate of #29086