Help solve typescript error trying to add new prop and doing conditional style

[nikitavoloboev]

My code looks like this:

interface Props {
  title: string
  onClick?: any
  darkBackground?: boolean
}

export function Chip({ title, onClick, darkBackground }: Props) {
  return (
    <StyledButton darkBackground={darkBackground} onClick={onClick}>
      {title}
    </StyledButton>
  )
}

const StyledButton = styled("button")`
  color: ${(props) => (props.darkBackground ? "black" : "white")};
  background-color: ${(props) => (props.darkBackground ? "white" : "black")};

I am trying to change color and background-color based on a prop to component.

However doing it I get lint errors with typescript:

I read goober docs and checked past issues on typescript and still confused how to make it work.

Thank you.

[nikitavoloboev]

To replicate I made this repo: https://github.com/nikitavoloboev/test/tree/main/next-t3

This is failing component I don't know how to type: https://github.com/nikitavoloboev/test/blob/main/next-t3/src/components/ModalCard.tsx

I think maybe I need to type it here:

const ModalCardWrapper = <>styled("div")`

With generic or something but not sure how.

Thank you. ♥️

[nikitavoloboev]

okay solved it with https://github.com/styled-components/styled-components/issues/630

had to do ${(props: { reason: string | undefined }) => basically