Material-UI：`css` 功能已弃用。改用 `styleFunctionSx`

Question

我有一个基于mui-org/material-ui 的组件库dot-components。我有另一个应用程序正在使用我的 dot-components 组件库，最近我注意到我的单元测试中出现了控制台警告。

控制台警告

    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)

有问题的控制台警告与mui-org/material-ui PR #23454 有关，但是我已经检查了我的应用程序以及dot-components 并确认我们根本没有使用Box。我查看了所有堆栈溢出并在网上搜索了所有可能的地方。我什至尝试在mui-org/material-ui #27799 中询问它，但他们更关心的是解决问题而不是实际帮助。

我在这里没有选择，我唯一能想到的是 MUI 正在抛出警告，因为它在我的样式组件中看到了 css 的使用

样式化组件示例

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

export const StyledProductInstancesList = styled.div``;

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

我将sandbox 与我所看到的问题的一个非常清晰的最小示例放在一起。

正在导入的包

    @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 

Answer 1

您的问题有几个方面：

1。为什么会执行Box 代码及其use of the css function？

在您提到的 cmets 中，您正在执行命名导入，例如 import {Button} from "@material-ui/core"。这可以是安全的，并在此处详细讨论：https://material-ui.com/guides/minimizing-bundle-size/#when-and-how-to-use-tree-shaking; 但如果您没有采取该指南中提到的步骤，那么从@material-ui/core 进行命名导入（尤其是在开发模式下，例如在执行单元测试时）将在该包的根目录中执行整个index.js，包括导入Box。

2。为什么导入Box 会导致控制台警告css 函数被弃用？

此弃用警告来自此处：https://github.com/mui-org/material-ui/blob/v4.12.1/packages/material-ui-system/src/styleFunctionSx.js#L69。您收到警告的原因是因为您使用的 @material-ui/system 版本 (4.12.1) 比您用于 @material-ui/core 的版本 (4.11.4) 更新。 4.12.1 version of Box 不再使用 css 函数，因此不会收到此警告。

这是一个非常简单的代码沙盒，它利用与您相同的版本来重现警告：https://codesandbox.io/s/css-function-is-deprecated-hjzl2?file=/src/App.js。

将 @material-ui/core 版本更新到 4.12.0 到 4.12.3 之间的任何版本都可以解决此沙盒中显示的问题：https://codesandbox.io/s/css-function-is-deprecated-forked-78qo7?file=/src/App.js

也可以将@material-ui/core 版本保留为4.11.4，并通过将导入更改为import Button from "@material-ui/core/Button"; 来消除警告，从而避免在根index.js (sandbox here) 中执行任何代码，但是我绝对建议将 @material-ui/core 的版本更新为 4.12.3，以便它与 @material-ui/system 的 4.12.1 的预期完全同步。