Additional Arguments to Styled Components in React with Typescript

by

I have a styled component I need to reuse. It looks like this:

export const FormFooter = styled.div(
  ({ theme }) => `
  padding: ${theme.spacing(3)}px;
  border-top: 1px solid ${theme.palette.lighterGray};
  position: sticky;
  width: 100%;
`,
)

This component is used elsewhere in our codebase and but there’s one application where I need it to behave slightly differently. Specifically, I need position to be absolute and bottom to be ‘0’.

I want to be able to pass additional arguments to this component and set default values for them. Is there a way to do that?

I’m looking for something like:

export const FormFooter = styled.div<{position?: string, bottom?: string}>(
  ({ theme }) => `
  padding: ${theme.spacing(3)}px;
  border-top: 1px solid ${theme.palette.lighterGray};
  position: ${position ? position : 'sticky'};
  bottom: ${bottom ? bottom : 'inherit'}
  width: 100%;
`,
)

But this gives me a typescript error stating that position and bottom are not defined.

129 thoughts on “Additional Arguments to Styled Components in React with Typescript”

  114. This design is incredible! You definitely know how
    to keep a reader amused. Between your wit and your videos, I was almost moved to start my own blog
    (well, almost…HaHa!) Wonderful job. I really enjoyed what you had to say, and more than that, how you presented it.
    Too cool!

    Reply

  118. Hello There. I found your weblog the use of msn. That is a very neatly written article.
    I will be sure to bookmark it and return to learn more of your useful info.
    Thank you for the post. I’ll definitely comeback.

    Reply

  119. With havin so much written content do you ever run into any
    issues of plagorism or copyright infringement? My site has a lot of completely unique content I’ve either authored myself or outsourced but it
    looks like a lot of it is popping it up all over the web without my
    agreement. Do you know any solutions to help prevent content from being
    ripped off? I’d definitely appreciate it.

    Reply

  122. I was suggested this website by means of my cousin. I am not
    positive whether this submit is written via him as nobody else realize such designated about my trouble.
    You are amazing! Thanks!

    Reply

  126. I was curious if you ever thought of changing the page layout of your site?

    Its very well written; I love what youve got to say.
    But maybe you could a little more in the way of content so people could connect with it better.
    Youve got an awful lot of text for only having 1 or 2 pictures.
    Maybe you could space it out better?

    Reply

Leave a Comment