覆盖样式组件

Question

我使用 TS 和 Styled Components 在我的 React 应用程序中创建了一个

Button

组件。为了简单起见，以下是样式：

const Button = styled.div`
    background: #fff;
    width: 100px;
    border-radius: 4px;
`

在单独的页面中，我正在使用此按钮，但想要更改背景颜色和宽度。我以为我可以使用以下样式创建我的

SecondaryButton

。

const SecondaryButton = styled(Button)`
    width: 40px;
    background: red;
`

我已将

Button

组件导入到我的第二个文件中，因此可以访问它。

SecondaryButton

正确继承了所有

Button

样式，但覆盖的样式未应用，甚至未显示在浏览器控制台中。

如何扩展样式组件并向其添加新样式？我想避免为一次性使用创建额外的组件。

样式组件 v6.1.6

反应v18.2.0

Answer 1

您需要将

className

属性传递给父组件，然后才能正确覆盖样式。示例：

按钮.tsx

interface IProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   className?: string;
   children?: React.ReactNode;
   onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
}

export default function Button({ ...props }: IProps) {
  const { className, children, onClick } = props;

  return (
    <ButtonWrapper
      className={className}
      onClick={onClick}
    >
      {children}
    </ButtonWrapper>
  );
}

const ButtonWrapper = styled.div`
  //css goes here
`;

---

主页.tsx

import Button from 'Button';

*/.../*
return(
  <SecondaryButton />
)

const SecondaryButton = styled(Button)`
  //new CSS
`

参考：https://styled-components.com/docs/advanced#styling-normal-react-components

如果您使用

styled(MyComponent)

表示法并且

MyComponent

不渲染传入的

className

属性，则不会应用任何样式。为了避免此问题，请确保您的组件将传入的

className

附加到 DOM 节点：