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

Question

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

我尝试了以下方法：

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

我认为这会将样式扩展到原始组件，但它似乎并没有提供。任何帮助将非常感激。

Answer 1

通常，在这种情况下，这只是底层组件未传递 className 属性的问题。我发现，对于将要成为 shared/re-used 的组件，在其根元素中设置 {...props} 可能会有所帮助，以确保人们可以在该元素上覆盖他们需要的任何内容。

例如

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

Styled Components - extending element styling and overriding properties