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

Posted 2023-03-15

【中文标题】Material-UI：`css` 功能已弃用。改用 `styleFunctionSx`

【英文标题】：Material-UI: The `css` function is deprecated. Use the `styleFunctionSx` instead

【发布时间】：2021-10-19 16:22:00

【问题描述】：

我有一个基于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 

【问题讨论】：

请显示在dot-components 中使用的所有@material-ui 包版本。由于无法看到使用的dot-components 代码和包，因此很难猜测警告的原因。

我认为可能的原因是您的@material-ui/core 版本比您的@material-ui/system 版本旧。

就声称您没有使用Box而言，我怀疑您正在执行诸如import Button from "@material-ui/core"之类的导入而不是import Button from "@material-ui/core/Button"，因此在@material-ui/core中执行index.js导入所有组件，包括Box。

@RyanCogswell 我已经根据您的要求更新了我的问题。另外你是对的，我们正在做命名导入，但如果我们具体说明我们的导入，例如 import Button from "@material-ui/core"，那将如何导入我们没有明确导入的组件？

【参考方案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 的预期完全同步。

【讨论】：

仍在努力解决此问题。我们检查了所有的 tree-shaking 配置，但问题仍然存在。我们还在package.json 中使用resolutions 强制@material-ui/system 到版本4.11.3。我将尝试升级到4.12.3，看看是否能解决我们的问题。

我们刚刚更新到4.12.3，同样的错误发生在Material-UI: The css`函数已被弃用。请改用styleFunctionSx。`有什么想法吗？

我怀疑您是否成功更新到 4.12.3。您是否可能通过其他依赖项拉入多个 @material-ui 副本？

是的，我刚刚回忆起我错过了第二个 package.json。在那里更新，看起来就成功了。关于为什么我们使用 #1 所做的其他配置不起作用的任何想法？