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

【问题标题】：Switching to mui5 sx prop from makeStyles- typescript error (no overload matches this call) passing object with position从 makeStyles 切换到 mui5 sx 道具-打字稿错误（没有重载匹配此调用）传递具有位置的对象
【发布时间】：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 文件里有什么吗

标签： css reactjs typescript material-ui

【解决方案1】：

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

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

Reference

【讨论】：