样式化组件可以用来设置自定义组件的样式吗

Question

我需要调整一些样式以适应已经制作的组件

Button

，看起来像（我简化了代码）。

Button

它实际上生成了一个具有@3rd-company默认样式的

<button>

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

在此处检查扩展样式...

基本上这可能有用

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