Search code examples
reactjstypescriptstyled-components

Errors while using styled and typed components in ReactJS

I have a styled component that looks like this:

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

And I use it like this:

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

Result:

enter image description here

If I try to style a little bit more my styled component like this:

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

Then the component where I use it says this:

enter image description here

And the Tooltip stops working. Any idea why is this happening? Isn't this the propper way to use styled components?

Solution

  • My soultion to avoid extra typos and errors was to separate the Material UI properties from the styled component like this:

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

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