styled-components 可以用来设置自定义组件的样式吗

Question

我需要将一些样式适配到一个已经制作好的组件Button，看起来像（我简化了代码）

Button 它实际上生成了一个 <button> 与 @3rd-company 默认样式

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

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

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

问题是这会添加内联样式。

我正在尝试将这些样式移动到样式组件中：

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>
  </>
)

但是我收到了这个错误：

IDE:
浏览器：

这个不能用在自定义组件上？任何解决方法？

Answer 1

检查 here 中的扩展样式...

基本上这可能有效

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>
  </>
)

styled-components 可以用来设置自定义组件的样式吗

Can styled-components be used to style a custom component

custom-component

reactjs

styled-components