Styled Components-扩展元素的样式和重写属性

Question

我使用的是预先存在的样式按钮组件和大多数原始样式，但是'top'和'right'属性需要更新。

我尝试了以下操作：

const StyledButton = styled(Button)`
    right: -5px;
    top: 40px;
`;

我以为这会将样式扩展到原始组件，但是似乎并没有通过。任何帮助将非常感激。

Answer 1

通常，在这种情况下，这只是基础组件没有传递className道具的问题。我发现，对于将要共享/重用的组件，在其根元素中使用{...props}以确保人们可以覆盖该元素上需要的内容可能会有所帮助。

例如

const Button: React.FC = ({ text, ...props }) => {
  return <button {...props}>{text}</button>
}