theme.spacing.unit changes in Material-UI 4.x

3416

Are you in process of upgrading Material-UI 3.x to Material-UI 4.x ? Then the following warning might have familiar with you already.

Warning: Material-UI: theme.spacing.unit usage has been deprecated.
It will be removed in v5.
You can replace `theme.spacing.unit * y` with `theme.spacing(y)`.

You can use the `https://github.com/mui-org/material-ui/tree/master/packages/material-ui-codemod/README.md#theme-spacing-api` migration helper to make the process smoother.

This is one of the change which needs a full refactoring of your code base. Of course this is a deprecation warning only means none of your code will break after migration. But you will start seeing this error in develop mode.
Its good to fix the error because Material-UI will drop the support for older syntax in future versions. Following code snippets helps you how to refactor your code.

Old Syntax

const s1 = theme.spacing.unit;

const s2 = theme.spacing.unit * 4;

const s3 = theme.spacing.unit / 2;

New Syntax

const s1 = theme.spacing(1);

const s2 = theme.spacing(4);

const s3 = theme.spacing(1/2);

hope these code snippets helps you refactoring your code. Happy refactoring :)