如何使用styled-components覆盖现有React组件的样式？

问题根因 #

styled-components 包裹自定义 React 组件时，会自动生成覆写样式的自定义类名，以 className 属性的形式传递给被包裹的组件。你当前的 <DiscoverButton> 没有把接收的 className 传递给内部渲染的根节点 BigButton，导致外层覆写的宽度样式无法挂载生效。

修复方案 #

方案1：透传属性到内部根节点（推荐，可完整复用DiscoverButton的原有逻辑） #

先修改 DiscoverButton.tsx，把外部传入的所有属性透传给内部的 BigButton，就能让styled生成的类名生效：

export const BigButton = styled.button`
  width: 100%;
  height: 3.5rem;
  background-color: var(--lighter-black);
  border: none;
  border-radius: 0.4rem;
  color: var(--cultured-white);

  transition: background-color 0.7s, color 0.7s;

  &:hover {
    background-color: transparent;
    border: 2px solid var(--lighter-black);
    color: var(--lighter-black);
  }
`;

export const DiscoverButton: React.FC<Props> = ({ children, ...props }) => {
  return (
    // 透传所有外部属性，包含styled-components生成的className
    <BigButton 
      {...props}
      onClick={(e) => {
        // 如果需要支持外部传入的点击事件，可先执行外部逻辑
        // props.onClick?.(e);
        // 原有内置点击逻辑保留在这里
        // do smth with props
      }}
    >
      {children}
    </BigButton>
  );
};

修改后你原本写的 ReturnButton.tsx 代码就可以正常生效，额外定义的宽度样式优先级会高于原有 BigButton 的宽度设置。
注意你贴出的ReturnButton代码末尾缺少组件和函数的闭合符号，补充完整即可避免语法报错。

方案2：直接基于基础样式组件扩展 #

如果你不需要复用 DiscoverButton 的内置逻辑，也可以直接继承公共样式组件 BigButton 来实现：

// ReturnButton.tsx
import { BigButton } from './DiscoverButton.tsx';

const ReturnButtonStyled = styled(BigButton)`
  width: 7%;
`;

export const ReturnButton: React.FC<Props> = ({ children, ...props }) => {
  return (
    <ReturnButtonStyled id={props.id} btnTitle={props.btnTitle}>
      {children}
    </ReturnButtonStyled>
  );
};

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