styled-components继承自定义组件样式不生效，PrimaryButton样式未识别

问题根因 #

使用styled()包裹自定义React组件时，styled-components会自动向组件注入样式类名className，你当前的DefaultButton没有接收该属性并挂载到内部真实的按钮DOM节点上，扩展的样式类没有绑定对象，因此不生效。

修复代码 #

修改DefaultButton.tsx，透传className属性：

import * as S from "./styles";

const DefaultButton = ({ children, className }: { children: React.ReactNode; className?: string }) => {
  return <S.Button className={className}>{children}</S.Button>;
};
export default DefaultButton;

（可选优化）如果需要支持所有按钮原生属性，可以直接继承button的HTML属性类型，后续加onClick、disabled等属性或扩展其他样式都不需要再调整组件结构：

import * as S from "./styles";
import type { ButtonHTMLAttributes } from "react";

const DefaultButton = ({ children, ...rest }: ButtonHTMLAttributes<HTMLButtonElement>) => {
  return <S.Button {...rest}>{children}</S.Button>;
};
export default DefaultButton;

内容的提问来源于stack exchange，提问作者Yunus