从 makeStyles 切换到 mui5 sx 道具-打字稿错误（没有重载匹配此调用）传递具有位置的对象

Posted 2023-03-06

【中文标题】从 makeStyles 切换到 mui5 sx 道具-打字稿错误（没有重载匹配此调用）传递具有位置的对象

【英文标题】：Switching to mui5 sx prop from makeStyles- typescript error (no overload matches this call) passing object with position

【发布时间】：2022-01-17 05:23:20

【问题描述】：

我有一个组件正在尝试转换为 mui 5。它是这样的：

const useStyles = makeStyles(
   imageContainer: 
     display: "flex",
     width: "65%",
     float: "left",
     marginRight: "2px",
     position: "relative",
     zIndex: 99999,
  
)

function MyComponent() 
  const classes = useStyles();

  return (
      <div className=classes.imageContainer></div>
  )

我正在尝试将其转换为：

const imageContainer = 
     display: "flex",
     width: "65%",
     float: "left",
     marginRight: "2px",
     position: "relative",
     zIndex: 99999,

function MyComponent2() 
  

  return (
      <Box sx=imageContainer></Box>
  )

我收到错误“没有重载匹配此调用”。如果我像 sx 内联那样做，它可以工作：

   <Box sx=display: "flex",
     width: "65%",
     float: "left",
     marginRight: "2px",
     position: "relative",
     zIndex: 99999 
    >
        ...
    </Box>

奇怪的是，如果我去掉浮动和位置，我可以按计划传递它：

const imageContainer = 
     display: "flex",
     width: "65%",
     //float: "left",
     marginRight: "2px",
     //position: "relative",
     zIndex: 99999,

function MyComponent2() 


  return (
      <Box sx=imageContainer></Box>
  )

或者我应该继续使用 makeStyles 吗？但如果我这样做，我还有多长时间才能摆脱它？因为它说它已被弃用。这是否意味着它最终会被删除？ 谢谢

【问题讨论】：

MUI 中的 sx 属性并不支持所有属性。 sx 中的 marginRight 定义为“mr”。

那我怎么能内联传递这些属性呢？正如我所说，我可以去 sx=float: 'left' 没问题，但我不能传递带有 float: 'left' 的对象。我觉得奇怪的是它允许它以一种方式而不是另一种方式。

我检查了我的工作正常。如果我将其定义为对象并传递它，则显示 float 属性...尝试在函数中创建 obj

你在使用打字稿？只是为了确保我没有犯愚蠢的错误，我只是尝试了： const obj=float: 'left' 然后

你能告诉我你的 tsconfig.json 文件里有什么吗

【参考方案1】：

如果您使用的是打字稿，则必须将其定义为

    const imageContainer = 
     display: "flex",
     width: "65%",
     float: "left",
     marginRight: "2px",
     position: "relative",
     zIndex: 99999,
 as const;

Reference