样式化的组件-扩展元素的样式和覆盖属性

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>
}