在 ReactJS 中使用样式化和类型化组件时出现错误

Question

我有一个如下所示的样式组件：

export const TestClassButton = styled(Button)({ ... })

我这样使用它：

<Tooltip arrow title={"status"}>
   <TestClassButton
     id={"button-status-dialog"}
     onClick={() => setShowDialog(!showDialog)}
   >
     <ListAltIcon />
   </TestClassButton>
 </Tooltip>

结果：

如果我尝试对我的样式组件进行更多样式设置，如下所示：

export const TestClassButton = styled((props) => (
  <Button variant={"outlined"} {...props} />
))({ ... });

然后我使用它的组件是这样说的：

工具提示停止工作。知道为什么会发生这种情况吗？这不是使用样式组件的正确方法吗？

Answer 1

嘿，刚刚在 mui 页面上发布了这个信息：

const TestClassButton = styled(Button, { 
  shouldForwardProp: (props) => 
    ['myCustomProp'].every(key => key !== prop),
})<ButtonProps & { myCustomProp?: boolean  }>(({ theme, myCustomProp }) => theme.unstable_sx({
   background: myCustomProp ? 'red' : 'green',
}))

const Component = () => {
   return <TestClassButton myCustomProp>TEST</TestClassButton>
}

Answer 2

为了避免额外的拼写错误和错误，我的想法是将 Material UI 属性与样式组件分开，如下所示：

const StyledButton = ({ children, ...props }) => (
   <Button size={"small"} variant={"contained"} {...props}>
      {children}
   </Button>
);

export const TestClassButton = styled(StyledButton)({ ... });