Is there anyone out there who can assist with the following query? I have a functional .js file that I need to integrate into a TypeScript program.
import React from "react";
import styled, { css } from "styled-components";
const style = ({ theme, ...rest }) => css`
border-color: ${theme.colors.primary};
background-color: ${theme.colors.lightest};
color: ${theme.colors.secondary};
border-width: 2px;
border-style: solid;
padding: 10px;
font-size: 24px;
:hover {
color: ${theme.colors.lightest};
background-color: ${theme.colors.secondary};
}
`;
const ButtonBase = styled.button([style]);
export const Button = ({ onClick, children }) => (
<ButtonBase onClick={onClick}>{children}</ButtonBase>
);
I'm having trouble with this specific line:
const ButtonBase = styled.button([style]);
The TypeScript error I'm encountering is:
[ts]
Argument of type '(({ theme, ...rest }: { [x: string]: any; theme: any; }) => InterpolationValue[])[]' is not assignable to parameter of type 'TemplateStringsArray'.
Property 'raw' is missing in type '(({ theme, ...rest }: { [x: string]: any; theme: any; }) => InterpolationValue[])[]'.
const style: ({ theme, ...rest }: {
[x: string]: any;
theme: any;
}) => InterpolationValue[]