Styled Components - extending element styling and overriding properties

Question

I'm using a pre-existing styled button component and the majority of the original styling, however the 'top' and 'right' properties need updating.

I have tried the following:

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

I thought this would extend the styling to the original component, however it doesn't seem to be feeding through. Any help would be much appreciated.

Answer 1

Often, in this case, it's simply a matter of the underlying component not passing on the className prop. I find that, with components that are going to be shared/re-used, it can be helpful in their root element to have {...props} to ensure people can override whatever they need to on that element.

e.g.

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