MUI - 扩展 sx props 以记住值并避免重新渲染

Question

MUIsx的 prop对于速度和代码可读性很有用（合理），但它可能会导致许多不必要的重新渲染（这会导致性能下降）。sx

所以我想知道是否有办法添加 useMemo 包装版本的 MUIsx道具。我将如何扩展 MUI 来实现这一目标？

这是我的意思的一个简化示例。

基地情况：

const MyComponent = () => {

  return
    <>
      <Box sx={{color: "red"}}> I am a bit static </Box>
      <Box sx={{width: window.innerWidth + "px"}}> I am so dynamic! </Box>
    </>  
};

这将是（在本例中是过度的）优化：

const MyComponent = () => {
  const boxStyle = useMemo(() => ({color: "red"}), [])

  return
    <>
      <Box sx={boxStyle}> I am a bit static </Box>
      <Box sx={{width: window.innerWidth + "px"}}> I am so dynamic! </Box>
    </>  
};

这是我想通过扩展MUI来实现的“api”：

const MyComponent = () => {

  return
    <>
      <Box sxm={{color: "red"}}> I am a bit static </Box>
      <Box sx={{width: window.innerWidth + "px"}}> I am so dynamic! </Box>
    </>  
};

我将如何着手创建这个useMemo增强版本sx，以便在任何 MUI 组件中轻松使用？

我见过这个包裹。这可能是朝着好的方向迈出的一步。