Can styled-components be used to style a custom component

Question

I need to adapt some styles to an already-made component Button, which looks like (I simplified the code).

Button it actually generates a <button> with the @3rd-company default styles

import { Button } from '@3rd-company/ui';

const desktopBtn = {
    width: '164px',
    height: '48px',
    marginRight: '20px',
  };

return (
   <>
    <Button style={desktopBtn}>
        My CTA goes here
    </Button>
  </>
)

The problem is that this adds inline-styles.

I'm trying to move those styles into an styled component:

import { Button } from '@3rd-company/ui';
import { styled } from 'styled-components';

const DesktopBtn = styled.Button`
    width: '164px';
    height: '48px';
    marign-right: '20px';
 `;

return (
   <>
    <DesktopBtn>
        My CTA goes here
    </DesktopBtn>
  </>
)

But I'm getting this error:

• IDE:
• Browser:

This can not be used on custom components? any workaround?

Answer 1

Check about extended style in here...

Basically this might work

import { Button } from '@3rd-company/ui';
import { styled } from 'styled-components';

const DesktopBtn = styled(Button)`
    width: '164px';
    height: '48px';
    margin-right: '20px';
 `;

return (
   <>
    <DesktopBtn>
        My CTA goes here
    </DesktopBtn>
  </>
)