Question

66

How to override React Component styles with styled components?

rated 0 times [ 69] [ 3] / answers: 1 / hits: 5961 / 3 Years ago, fri, september 3, 2021, 12:00:00

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>

  );

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

eliza

Add To Favorites

Follow

Total Points: 732

Total Questions: 96

Total Answers: 86

Location: Guam

Member since Fri, Jun 18, 2021

3 Years ago

eliza questions

1 Cannot invoke an object which is possibly 'undefined' in children component

Fri, Oct 15, 21, 00:00, 3 Years ago

1 TypeError: Cannot read properties of undefined (reading 'requestContent')

Thu, Sep 23, 21, 00:00, 3 Years ago

1 How to override material-ui css with styled component?

Sun, Jul 4, 21, 00:00, 3 Years ago

1 Angular ngOnInit not working for the child component

Tue, Dec 31, 19, 00:00, 5 Years ago

1 React - Axios call make too many requests

Thu, Sep 26, 19, 00:00, 5 Years ago

View All

answered 3 Years ago karyme · Accepted Answer

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

Caveat with className

When defining a component 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 components in such a way as to manually pass the extraneous props on to the styled components.

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%;

`;