Custom styled-components breakpoint `Binding element 'theme' implicitly has an 'any' type`

Viewed 171

I created "breakpoints" helper functions with styled-components that looks like this:

type Props = Record<string, unknown>
type Interpolators<P extends Props> =
  | SimpleInterpolation[]
  | Array<Interpolation<ThemedStyledProps<Props, Theme>>>
  | Array<Interpolation<ThemedStyledProps<P, Theme>>>

export const xs = <T extends Props>(
  strings: TemplateStringsArray,
  ...values: Interpolators<T>
) => css`
  @media screen and (min-width: ${breakpoints.xs}px) {
  ${css(strings, ...values)}
}`

This used to work just fine, but with TS v4.1x I'm getting the following error when I try to access the theme or any other prop inside the xs function:

Binding element 'theme' implicitly has an 'any' type. TS7031

This is how I'm using it:

export const Container = styled.div`
  height: ${NAVBAR_HEIGHT}px;
  border-bottom: 2px solid ${({ theme }) => theme.colors.borderSecondary};
  padding: 0px 1rem;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: ${({ theme }) => theme.colors.containerPrimary};

  ${xs`
    background-color: ${({ theme }) => theme.colors.borderSecondary}; // This is where it fails
  `}
`
0 Answers
Related