MUI+Next.js+TS中sx属性传入cursor常量不生效问题

第二种写法的核心错误是给cursor属性传值时误用了对象简写语法：

• cursor: { cursorPointer }是ES6对象属性简写语法，实际等价于cursor: { cursorPointer: "pointer" }，你传入的不是预期的字符串"pointer"，而是一个嵌套的普通JS对象
• MUI的sx引擎解析CSS规则时，只有接收到合法的字符串类型CSS属性值才会生成对应样式，传入对象会被判定为非法值直接丢弃，因此手型样式无法生效
• 第一种写法直接传入字符串"pointer"，符合CSS属性值的类型要求，因此可以正常运行。

移除传值时多余的大括号，直接将字符串常量赋值给cursor属性即可，修正后代码如下：

const cursorPointer = "pointer";
return (
  <Grid item>
    <Card 
      sx={{
        padding: "1rem",
        ":hover": {
          cursor: cursorPointer
        }
      }}
    />
  </Grid>
)

补充注意：只有当常量名和CSS属性名完全一致时，才能使用对象简写传值，例如下方写法同样合法：

// 常量名和CSS属性名cursor完全一致
const cursor = "pointer";
return (
  <Grid item>
    <Card 
      sx={{
        padding: "1rem",
        ":hover": {
          cursor // 等价于 cursor: cursor，值为字符串"pointer"，可正常生效
        }
      }}
    />
  </Grid>
)

内容的提问来源于stack exchange，提问作者Nika