Material-UI: The `css` function is deprecated. Use the `styleFunctionSx` instead

I have a component library dot-components which is based on mui-org/material-ui. I have another application which is using my dot-components component library and recently I have noticed a console warning appearing in my unit tests.

Console Warning

    console.warn
      Material-UI: The `css` function is deprecated. Use the `styleFunctionSx` instead.

      at css (../../node_modules/@material-ui/system/styleFunctionSx.js:75:13)
      at Object.<anonymous> (../../node_modules/@material-ui/core/Box/Box.js:14:37)
      at Object.<anonymous> (../../node_modules/@material-ui/core/Box/index.js:21:36)

The console warning in question is related to mui-org/material-ui PR #23454 however I have gone through my application as well as dot-components and have confirmed we are not using Box at all. I've looked through all of stack overflow and searched everywhere I could online. I even tried asking about it in mui-org/material-ui #27799 however they are more concerned with closing issues than they are actually helping.

I am out of options here, and the only thing that I can think of is MUI is throwing a warning because it sees the use of css in my styled components

Styled Component Sample

import styled, { css } from 'styled-components';

export const StyledProductInstancesList = styled.div``;

export const StyledCard = styled(DotCard)`
  ${({ theme }) => css`
    margin-bottom: ${theme.spacing(1)}px;
  `}
`;

I put together a sandbox with a very clear minimal example of the issue I'm seeing.

Packages being imported

    @material-ui/core:  4.11.4 
    @material-ui/styles:  4.11.4 
    @material-ui/system:  4.12.1 
    @material-ui/types:  5.1.0 
    @material-ui/utils:  4.11.2 
    @types/react: 16.9.56 => 16.9.56 
    react: 17.0.1 => 17.0.1 
    react-dom: 17.0.1 => 17.0.1 
    styled-components: 5.2.1 => 5.2.1 
    typescript: ~4.0.3 => 4.0.7

Solution

There are a couple aspects to your problem:

1. Why is the `Box` code and its use of the css function being executed?

In the comments you mention that you are doing named imports such as import {Button} from "@material-ui/core". This can be safe and is discussed in detail here: https://material-ui.com/guides/minimizing-bundle-size/#when-and-how-to-use-tree-shaking; but if you haven't taken steps mentioned in that guide, then doing a named import from @material-ui/core (especially in development mode such as when unit tests are executing) will execute the entire index.js in the root of that package which includes importing Box.

2. Why is importing `Box` causing a console warning about the `css` function being deprecated?

This deprecation warning is coming from here: https://github.com/mui-org/material-ui/blob/v4.12.1/packages/material-ui-system/src/styleFunctionSx.js#L69. The reason you are getting the warning is because you are using a newer version (4.12.1) of @material-ui/system than the version (4.11.4) you are using for @material-ui/core. The 4.12.1 version of Box no longer uses the css function and therefore would not get this warning.

Here is a very simple Code Sandbox reproducing the warning by leveraging the same versions as you: https://codesandbox.io/s/css-function-is-deprecated-hjzl2?file=/src/App.js.

Updating the @material-ui/core version to anything between 4.12.0 to 4.12.3 resolves the issue as shown in this sandbox: https://codesandbox.io/s/css-function-is-deprecated-forked-78qo7?file=/src/App.js

It is also possible to leave the @material-ui/core version at 4.11.4 and get rid of the warning by changing the import to import Button from "@material-ui/core/Button"; which then avoids executing any code in the root index.js (sandbox here), however I definitely recommend updating the version of @material-ui/core to 4.12.3 so it is fully in sync with the expectations of 4.12.1 of @material-ui/system.