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
`}
`