How to override React Component styles with styled components?-CodePudding

I have a <DiscoverButton> React Component which has some styles and does smth when clicked. I'm using styled components for styling btw. I need to create a <ReturnButton> React Component which will be almost identical, the only difference being the width.

This is what I'm trying to do, but doesn't accomplish what I want:

DiscoverButton.tsx

export const BigButton = styled.button`
  width: 100%;
  height: 3.5rem;
  background-color: var(--lighter-black);
  border: none;
  border-radius: 0.4rem;
  color: var(--cultured-white);

  transition: background-color 0.7s, color 0.7s;

  &:hover {
    background-color: transparent;
    border: 2px solid var(--lighter-black);
    color: var(--lighter-black);
  }
`;

export const DiscoverButton: React.FC<Props> = ({ children, ...props }) => {
  return (
    <BigButton onClick={() => // do smth with props >
      {children}
    </BigButton>
  );
};

And here is where I struggle: ReturnButton.tsx:

const ReturnButtonStyled = styled(DiscoverButton)`
  width: 7%;
`;

export const ReturnButton: React.FC<Props> = ({ children, ...props }) => {
  return (
    <ReturnButtonStyled id={props.id} btnTitle={props.btnTitle}>
      {children}
    </ReturnButtonStyled>
  );

CodePudding user response：

You should pass the className prop through to the rendered styled component.

export const DiscoverButton: React.FC<Props> = ({ children, className, ...props }) => {
  return (
    <BigButton
      className={className}
      onClick={() => // do smth with props
    >
      {children}
    </BigButton>
  );
};

Update