sx prop 未在 Material-UI 5 的自定义组件中进行转换

Question

在 StackOverflow 中找不到任何相关问题。

所以，在盒子组件中，sx道具正在发生变化，比如说

<Box
  sx={{
    display: 'flex',
    flexDirection: 'column',
    height: '100%'
  }}
>

到

<div class="MuiBox-root MuiBox-root-371"/>

但它不会在其他组件中发生变化，例如ListSubheader

<ListSubheader
  disableGutters
  disableSticky
  sx={{
    color: 'text.primary',
    fontSize: '0.75rem',
    lineHeight: 2.5,
    fontWeight: 700,
    textTransform: 'uppercase'
  }}
>

正在转变为

<li class="MuiListSubheader-root" sx="[object Object]">Manage</li>

我正在使用 create-react-app 和 Material-UI 5，这是我的 package.json

由于某种原因，我的sxprop 没有转换为类名。的屏幕截图

有什么提示可能配置不正确吗？不确定要提供什么所有信息。

Answer 1

检查你的组件代码，你可以导入 v4 组件：

import ListItemText from "@material-ui/core/ListItemText";

在 v5 中，MUI 组件被移动到一个名为@mui/material

import ListItemText from "@mui/material/ListItemText";

您只能sx在MUI v5中无需配置的情况下在其他组件中使用，如果您使用的是 v4 或 v5 的旧测试版本，则必须按照本节中的说明创建一个包装器组件：

import {
  compose,
  spacing,
  palette,
  styleFunctionSx
} from "@material-ui/system";
import MuiListSubheader from "@material-ui/core/ListSubheader";

const styleFunction = styleFunctionSx(compose(spacing, palette));
const ListSubheader = styled(MuiListSubheader)(styleFunction);

<ListSubheader sx={...} />

在 v5 中，您可以sx直接使用组件，因为它们已迁移到emotion.