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

【问题标题】：Can styled-components be used to style a custom component可以使用 styled-components 设置自定义组件的样式吗
【发布时间】：2021-10-02 10:29:45
【问题描述】：

我需要为一个已经制作好的组件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：
浏览器：

这不能用在自定义组件上吗？有什么解决办法吗？

【问题讨论】：

我觉得应该是这样的const DesktopBtn = styled.button。欲了解更多信息，请查看：styled-components.com/docs/basics#adapting-based-on-props
@PriyankKachhela 否，因为这将使用本机 button 而不是我导入的 Button
哦，我错过了自定义按钮组件的导入语句。我的错。 :)

标签： reactjs styled-components custom-component

【解决方案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>
  </>
)

【讨论】：