Type Declaration in Styled Component CSS file giving off errors

Question

I am trying to figure out why TypeScript is throwing an error in the styled component css file even though the type is obviously an object. Please see my code below:

export const OverlayCTA = styled.div<{
  ctaPosition?: object
}>`
  margin: 0.625rem 0 0;
  position: absolute;
  top: ${({ctaPosition}) => ctaPosition.top };
  left: ${({ctaPosition}) => ctaPosition.left };
  bottom:  ${({ctaPosition}) => ctaPosition.bottom };
  right:  ${({ctaPosition}) => ctaPosition.right };
  height: ${({ctaPosition}) => ctaPosition.height };
  @media (min-width: 992px) {
    margin: 3.375rem 0 0;
  }

ctaPosition is a prop containing an object that is passed from the component. As you can see, I declared the type as an object, however, I am getting the following error. Not sure why as it is an object type.

It is saying: Property 'height' does not exist on type 'object'.

Any help is appreciated. Thanks!

unhackit · Accepted Answer · 2022-12-16 22:36:29Z

1

You need to provide the full details for the ctaPosition type because typescript does not know that height or the other keys exists in object.

you can define it above like

export type CtaPositionType = {
  top: string; //or number whichever it is
  left: string; //or number whichever it is
  bottom: string; //or number whichever it is
  right: string; //or number whichever it is
  height: string; //or number whichever it is
}

export const OverlayCTA = styled.div<{
  ctaPosition?: CtaPositionType
}>`
  margin: 0.625rem 0 0;
  position: absolute;
  top: ${({ctaPosition}) => ctaPosition.top };
  left: ${({ctaPosition}) => ctaPosition.left };
  bottom:  ${({ctaPosition}) => ctaPosition.bottom };
  right:  ${({ctaPosition}) => ctaPosition.right };
  height: ${({ctaPosition}) => ctaPosition.height };
  @media (min-width: 992px) {
    margin: 3.375rem 0 0;
  }

answered Dec 16, 2022 at 22:36

unhackit

5713 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jim Jones Over a year ago

Thank you! Errors went away. Do you know if it is good practice to keep the type Object like that in the styled component file itself? @unhackit

unhackit Over a year ago

If you are defining an object type with values, it is always good to define it's values like we did above. If you are too lazy to do so, you can use Record<any, any>, which says it's an object with any key and any value, and typescript will not shout at you. The only downside is that you will not get type suggestions

Collectives™ on Stack Overflow

Type Declaration in Styled Component CSS file giving off errors

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related