I have a <DiscoverButton> React Component which has some styles and does smth when clicked. I'm using styled ponents 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 acplish 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>
  );

I have a <DiscoverButton> React Component which has some styles and does smth when clicked. I'm using styled ponents 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 acplish 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>
  );

• javascript
• css
• reactjs
• button
• styled-ponents

1 Answer 1

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

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

Update

Caveat with className

When defining a ponent you will need to mark className as optional in your Props interface

interface Props {
  .... other prop types ....
  /* This prop is optional, since TypeScript won't know that it's passed by the wrapper */
  className?: string,
  .... other prop types ....
}

You also don't necessarily need to write your functional ponents in such a way as to manually pass the extraneous props on to the styled ponents.

Example:

interface Props {
  btnTitle?: string,
  children: any,
  className?: string,
  id?: string,
  onClick: React.MouseEventHandler<HTMLButtonElement>,
}

const BigButton = styled.button`
  .... base styles ....
`;

const DiscoverButton: React.FC<Props> = ({ children, className, onClick }) => (
  <BigButton
    className={className}
    onClick={(...args) => {
      console.log("Did something with the props");
      onClick(...args);
    }}
  >
    {children}
  </BigButton>
);

const ReturnButton: React.FC<Props> = styled(DiscoverButton)`
  width: 7%;
`;