styled-components能否用于给第三方自定义Button组件设置样式？

styled-components完全支持给自定义组件设置样式，你的报错来自两处写法错误：

• styled调用语法错误：styled.Button 是用于创建原生<button>标签样式组件的语法，给第三方自定义组件设置样式时，需要把组件作为参数传入styled方法，写法为styled(Button)
• 样式代码本身有错误：
  1. 拼写错误：marign-right 应为 margin-right
  2. CSS语法错误：styled的模板字符串内遵循标准CSS语法，属性值不需要加单引号

直接修正写法即可，正确代码如下：

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

补充说明 #

如果修改后样式仍不生效，可确认两个点：

• 第三方Button组件是否支持接收className属性：styled-components是通过向目标组件传递自动生成的className来注入样式，绝大多数公开组件库的组件都会默认支持该属性
• 第三方组件的默认样式优先级是否过高：可以在需要覆盖的样式属性后加!important临时验证，后续可以通过调整CSS选择器优先级优化处理

内容的提问来源于stack exchange，提问作者Toni Michel Caubet