sx 道具未在 Material-UI 5 中的自定义组件中进行转换答案

【问题标题】：sx prop not getting transformed in custom components in Material-UI 5sx 道具未在 Material-UI 5 中的自定义组件中进行转换
【发布时间】：2021-09-19 11:59:52
【问题描述】：

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

所以，在 box 组件中，sx prop 正在被转换，比如从

<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>

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

由于某种原因，我的 sx 道具没有转换为类名。截图

任何提示什么配置可能不正确？不确定，要提供哪些信息。

【问题讨论】：

标签： reactjs material-ui create-react-app

【解决方案1】：

检查您的组件代码，您可能会导入 v4 组件：

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

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

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

您只能在其他组件中使用sx，而无需在MUI v5中进行配置，如果您使用的是v4或v5的旧beta版本，则必须按照说明创建一个包装器组件从这个section:

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，因为它们一直是 migrated to emotion。

【讨论】：