sx 道具没有在 Material-UI 5 中的自定义组件中转换

Question

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

所以，在盒子组件中，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 道具没有转换为 class 名称。截图

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

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 的较旧 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。

sx 道具没有在 Material-UI 5 中的自定义组件中转换

sx prop not getting transformed in custom components in Material-UI 5

reactjs

material-ui

create-react-app